@ably/ui 5.0.1-dev.baf5b97.0 → 5.3.0-dev.3c981a4

package/reset/styles.css

@@ -0,0 +1,487 @@
+@layer base {
+  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+  /* Document
+   ========================================================================== */
+
+  /**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+  html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+
+  /* Sections
+   ========================================================================== */
+
+  /**
+ * Remove the margin in all browsers.
+ */
+
+  body {
+    margin: 0;
+  }
+
+  /**
+ * Render the `main` element consistently in IE.
+ */
+
+  main {
+    display: block;
+  }
+
+  /**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+
+  /* Grouping content
+   ========================================================================== */
+
+  /**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+
+  /**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /* Text-level semantics
+   ========================================================================== */
+
+  /**
+ * Remove the gray background on active links in IE 10.
+ */
+
+  a {
+    background-color: transparent;
+  }
+
+  /**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    -webkit-text-decoration: underline dotted;
+            text-decoration: underline dotted; /* 2 */
+  }
+
+  /**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /**
+ * Add the correct font size in all browsers.
+ */
+
+  small {
+    font-size: 80%;
+  }
+
+  /**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /* Embedded content
+   ========================================================================== */
+
+  /**
+ * Remove the border on images inside links in IE 10.
+ */
+
+  img {
+    border-style: none;
+  }
+
+  /* Forms
+   ========================================================================== */
+
+  /**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+
+  /**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+  button,
+  input {
+    /* 1 */
+    overflow: visible;
+  }
+
+  /**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+  button,
+  select {
+    /* 1 */
+    text-transform: none;
+  }
+
+  /**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+
+  /**
+ * Remove the inner border and padding in Firefox.
+ */
+
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  /**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  /**
+ * Correct the padding in Firefox.
+ */
+
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+
+  /**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+
+  /**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+  textarea {
+    overflow: auto;
+  }
+
+  /**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+
+  /**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+
+  /**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+
+  /* Interactive
+   ========================================================================== */
+
+  /*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+  details {
+    display: block;
+  }
+
+  /*
+ * Add the correct display in all browsers.
+ */
+
+  summary {
+    display: list-item;
+  }
+
+  /* Misc
+   ========================================================================== */
+
+  /**
+ * Add the correct display in IE 10+.
+ */
+
+  template {
+    display: none;
+  }
+
+  /**
+ * Add the correct display in IE 10.
+ */
+
+  [hidden] {
+    display: none;
+  }
+}
+/* Reset based on https://unpkg.com/tailwindcss@1.9.6/dist/base.css */
+@layer base {
+  html {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+      Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+      "Noto Color Emoji";
+    line-height: 1.5;
+  }
+
+  blockquote,
+  dl,
+  dd,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  figure,
+  p,
+  pre {
+    margin: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  fieldset {
+    margin: 0;
+    padding: 0;
+  }
+
+  ol,
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  pre,
+  code,
+  kbd,
+  samp {
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+      monospace;
+  }
+
+  button {
+    background-color: transparent;
+    background-image: none;
+  }
+
+  button:focus {
+    outline: 1px dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: #e2e8f0;
+  }
+
+  hr {
+    border-top-width: 1px;
+  }
+
+  img {
+    border-style: solid;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  input:-ms-input-placeholder,
+  textarea:-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  input::-moz-placeholder, textarea::-moz-placeholder {
+    color: #a0aec0;
+  }
+
+  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: #a0aec0;
+  }
+
+  input::-webkit-search-cancel-button {
+    display: none;
+  }
+
+  button,
+  [role="button"] {
+    cursor: pointer;
+  }
+
+  table {
+    border-collapse: collapse;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  svg {
+    fill: currentColor;
+  }
+}
+

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

@@ -1,3 +1,3 @@
-<div class="hljs p-32 overflow-auto" data-id="code">
-  <pre lang="<%= @language %>"><code class="font-mono language-<%= @language %>"><%= @snippet %></code></pre>
-</div>
+<%= tag.div class: "hljs p-32 overflow-auto", data: { id: "code" } do %>
+  <%= tag.pre lang: @language do %><%= tag.code class: "language-#{@language} #{@text_size}" do %><%= @snippet %><% end %><% end %>
+<% end %>

package/src/core/Code/component.jsx

@@ -4,9 +4,9 @@ import T from "prop-types";
 import "./component.css";
 import { highlight } from "./component.js";
 
-const Code = ({ language, snippet }) => {
+const Code = ({ language, snippet, textSize = "ui-text-code1" }) => {
   const HTMLraw = highlight(language, `${snippet}`.trim());
-  const className = `font-mono language-${language}`;
+  const className = `language-${language} ${textSize}`;
   return (
     <div className="hljs p-32 overflow-auto" data-id="code">
       <pre lang={language}>
@@ -19,6 +19,7 @@ const Code = ({ language, snippet }) => {
 Code.propTypes = {
   language: T.string,
   snippet: T.string,
+  textSize: T.string,
 };
 
 export default Code;

package/src/core/Code/component.rb

@@ -2,9 +2,10 @@ module AblyUi
   module Core
     class Code < ViewComponent::Base
       include AblyUi::Core::Util
-      def initialize(language:, snippet:)
+      def initialize(language:, snippet:, text_size: 'ui-text-code1')
         @language = language
         @snippet = snippet.try(:strip)
+        @text_size = text_size
       end
     end
   end

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

@@ -0,0 +1,9 @@
+<section class="w-full bg-white">
+  <ul class="py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center">
+    <% companies.each do |company| %>
+	    <li class="flex-auto text-center sm:w-1/3 w-1/2">
+	      <%= image_tag company[:logo], alt: "#{company[:label]} logo", class: 'mx-auto' %>
+	    </li>
+    <% end %>
+  </ul>
+</section>

package/src/core/CustomerLogos/component.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import T from "prop-types";
+
+const CustomerLogos = ({ companies }) => {
+  return (
+    <section className="w-full bg-white">
+      <ul className="py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center">
+        {companies.map((company) => (
+          <li key={company.label} className="flex-auto text-center sm:w-1/3 w-1/2">
+            <img alt={company.label} src={company.logo} className="mx-auto" />
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+};
+
+CustomerLogos.propTypes = {
+  companies: T.arrayOf(
+    T.shape({
+      label: T.string,
+      logo: T.string,
+    })
+  ),
+};
+
+export default CustomerLogos;

package/src/core/CustomerLogos/component.rb

@@ -0,0 +1,13 @@
+require 'json'
+
+module AblyUi
+  module Core
+    class CustomerLogos < ViewComponent::Base
+      attr_reader :companies
+
+      def initialize(companies:)
+        @companies = companies
+      end
+    end
+  end
+end

package/src/core/FeaturedLink/component.css

@@ -1,7 +1,6 @@
 @layer components {
   .ui-featured-link {
-    max-width: calc(100% - 1.25rem);
-    @apply font-medium block;
+    @apply font-sans font-medium block;
     @apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
   }
 

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

@@ -1,4 +1,4 @@
-<%= link_to(@url, class: "ui-featured-link #{@text_size} #{@flush ? '' : 'py-8'}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
+<%= link_to(@url, class: "ui-featured-link #{@text_size} #{@flush ? '' : 'py-8'}  #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
   <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
                                                    size: "calc(var(--featured-link-icon-size) * 1.25)",
                                                    color: @icon_color,

package/src/core/FeaturedLink/component.rb

@@ -5,12 +5,14 @@ module AblyUi
         url:,
         text_size: 'text-menu3',
         icon_color: 'text-cool-black',
-        flush: false
+        flush: false,
+        additional_css: ''
       )
         @url = url
         @text_size = text_size
         @icon_color = icon_color
         @flush = flush
+        @additional_css = additional_css
       end
     end
   end

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

@@ -25,7 +25,7 @@
         <% 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">beta</span>
+              <%= @session_data[:myAccessTokens][:text] %><span class="ui-version-tag">preview</span>
             <% end %>
           </li>
         <% end %>

package/src/core/MeganavItemsSignedIn/component.jsx

@@ -48,7 +48,7 @@ const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
               <li>
                 <a href={absUrl(sessionState.myAccessTokens.href)} className="ui-meganav-account-link">
                   {sessionState.myAccessTokens.text}
-                  <span className="ui-version-tag">beta</span>
+                  <span className="ui-version-tag">preview</span>
                 </a>
               </li>
             )}

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

@@ -6,7 +6,7 @@
   <% end %>
 
   <div class="hidden justify-center items-center my-24" data-id="slider-controls">
-    <button type="button" class="p-0 group w-24 h-24 flex items-center focus:outline-gui-focus" data-id="slider-previous">
+    <button type="button" class="p-0 w-24 h-24 flex items-center focus:outline-gui-focus" data-id="slider-previous">
       <%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "transform rotate-180")) %>
     </button>
 
@@ -21,7 +21,7 @@
       <% end %>
     </ul>
 
-    <button type="button" class="p-0 group w-24 h-24 flex items-center focus:outline-gui-focus" data-id="slider-next">
+    <button type="button" class="p-0 w-24 h-24 flex items-center focus:outline-gui-focus" data-id="slider-next">
       <%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black")) %>
     </button>
   </div>

package/src/core/Slider/component.js

@@ -4,7 +4,7 @@ import throttle from "lodash.throttle";
 
 import { queryId, queryIdAll } from "../dom-query";
 
-const mdBreakpoint = () => window.matchMedia("(min-width: 600px)").matches;
+const mdBreakpoint = () => window.matchMedia("(min-width: 48rem)").matches;
 const DRAG_BUFFER = 20;
 
 const init = (slidesContainer) => {
@@ -80,7 +80,7 @@ const init = (slidesContainer) => {
 
   return () => {
     transformContainer.style.transform = null;
-    sliderControls.classList("flex", "hidden");
+    sliderControls.classList.replace("flex", "hidden");
   };
 };
 

package/src/core/Slider/component.jsx

@@ -45,7 +45,7 @@ const Slider = ({
       </ol>
 
       <div className="justify-center items-center my-24 hidden" data-id="slider-controls">
-        <button type="button" className="p-0 group w-24 h-24 flex items-center focus:outline-gui-focus" data-id="slider-previous">
+        <button type="button" className="p-0 w-24 h-24 flex items-center focus:outline-gui-focus" data-id="slider-previous">
           <Icon
             name="icon-gui-disclosure-arrow"
             size="1.5rem"
@@ -66,7 +66,7 @@ const Slider = ({
           ))}
         </ul>
 
-        <button type="button" className="p-0 group w-24 h-24 flex items-center focus:outline-gui-focus" data-id="slider-next">
+        <button type="button" className="p-0 w-24 h-24 flex items-center focus:outline-gui-focus" data-id="slider-next">
           <Icon name="icon-gui-disclosure-arrow" size="1.5rem" color="text-cool-black" data-id="meganav-control-mobile-dropdown-menu" />
         </button>
       </div>