@ably/ui 8.7.0-dev.68ea318 → 8.7.0-dev.7021bee

package/src/core/Logo/component.jsx

@@ -1,46 +1,10 @@
-import React, { useMemo } from "react";
+import React from "react";
 import T from "prop-types";
-import { nanoid } from "nanoid/non-secure";
-
-const Logo = ({ dataId, href = "/" }) => {
-  // This fixes a bug where if the logo is rendered more than once on the page, and one of the instances
-  // if it is hidden, the other instance will not show the ably shape from the logo.
-
-  // This is because the defs in this SVG reference ids that need to be unique ids. The browser discards the "newer"
-  // linearGradients defined in the other logo, and inherits the `hidden` style from the first.
-  const gradientIds = useMemo(() => [nanoid(), nanoid()], []);
 
+const Logo = ({ dataId, logoUrl, href = "/", additionalImgAttrs, additionalLinkAttrs }) => {
   return (
-    <a href={href} className="h-32">
-      <svg data-id={dataId} className="text-cool-black transition-colors" width="108" height="32" viewBox="0 0 108 32" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M62.922 24.9786V4.08813H66.6933V11.6512C67.9709 10.435 69.6164 9.76044 71.3538 9.76044C75.4318 9.76044 79.0498 12.8674 79.0498 17.5484C79.0498 22.2293 75.4318 25.3465 71.3538 25.3465C69.5244 25.3465 67.7971 24.6209 66.5094 23.3024V24.9786H62.922ZM75.2785 17.5484C75.2785 14.932 73.4183 13.1025 70.9859 13.1025C68.6148 13.1025 66.7853 14.84 66.6933 17.3644V17.5484C66.6933 20.1648 68.5534 21.9942 70.9859 21.9942C73.4183 21.9942 75.2785 20.1648 75.2785 17.5484ZM80.7975 24.9786V4.08813H84.5688V24.9786H80.7975ZM89.8425 30.3954L92.0399 25.1523L86.0712 10.1284H90.1491L93.9511 20.6247L97.8144 10.1284H101.954L93.8591 30.4056H89.8425V30.3954ZM56.9329 10.1284V12.0191C55.6247 10.5883 53.7952 9.77066 51.9147 9.77066C47.8367 9.77066 44.2187 12.8777 44.2187 17.5586C44.2187 22.2497 47.8367 25.3465 51.9147 25.3465C53.8668 25.3465 55.7166 24.4982 57.0555 22.9754V24.9888H60.3465V10.1284H56.9329ZM56.5649 17.5484C56.5649 20.1341 54.7048 21.9942 52.2724 21.9942C49.8399 21.9942 47.9798 20.1341 47.9798 17.5484C47.9798 14.9626 49.8399 13.1025 52.2724 13.1025C54.6435 13.1025 56.473 14.8706 56.5649 17.3644V17.5484Z"
-          fill="currentColor"
-        />
-        <path
-          d="M19.2858 0L3.14788 29.5369L0 27.3293L14.932 0H19.2858ZM19.5107 0L35.6487 29.5369L38.7965 27.3293L23.8646 0H19.5107Z"
-          fill={`url(#${gradientIds[0]})`}
-        />
-        <path d="M35.4238 29.7107L19.3983 17.16L3.37271 29.7107L6.64323 32L19.3983 22.0147L32.1533 32L35.4238 29.7107Z" fill={`url(#${gradientIds[1]})`} />
-        <defs>
-          <linearGradient id={gradientIds[0]} x1="5.47361" y1="37.4219" x2="32.4603" y2="7.45023" gradientUnits="userSpaceOnUse">
-            <stop stopColor="#FF5416" />
-            <stop offset="0.2535" stopColor="#FF5115" />
-            <stop offset="0.461" stopColor="#FF4712" />
-            <stop offset="0.6523" stopColor="#FF350E" />
-            <stop offset="0.8327" stopColor="#FF1E08" />
-            <stop offset="1" stopColor="#FF0000" />
-          </linearGradient>
-          <linearGradient id={gradientIds[1]} x1="10.7084" y1="39.3593" x2="26.6583" y2="21.6452" gradientUnits="userSpaceOnUse">
-            <stop stopColor="#FF5416" />
-            <stop offset="0.2535" stopColor="#FF5115" />
-            <stop offset="0.461" stopColor="#FF4712" />
-            <stop offset="0.6523" stopColor="#FF350E" />
-            <stop offset="0.8327" stopColor="#FF1E08" />
-            <stop offset="1" stopColor="#FF0000" />
-          </linearGradient>
-        </defs>
-      </svg>
+    <a href={href} data-id={dataId} className="block" style={{ height: "2.125rem" }} {...additionalLinkAttrs}>
+      <img src={logoUrl} width="108px" alt="Ably logo" {...additionalImgAttrs} />
     </a>
   );
 };
@@ -48,6 +12,9 @@ const Logo = ({ dataId, href = "/" }) => {
 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,17 +1,26 @@
-require 'securerandom'
-
 module AblyUi
   module Core
     class Logo < ViewComponent::Base
       include AblyUi::Core::MeganavConfig
 
-      attr_reader :href, :data_id, :gradient_id_0, :gradient_id_1
+      attr_reader :href,
+                  :logo_url,
+                  :data_id,
+                  :additional_img_attrs,
+                  :additional_link_attrs
 
-      def initialize(data_id: '', href:)
+      def initialize(
+        href:,
+        logo_url:,
+        data_id: '',
+        additional_img_attrs: {},
+        additional_link_attrs: {}
+      )
         @data_id = data_id
         @href = href
-        @gradient_id_0 = "paint_linear_#{SecureRandom.uuid}"
-        @gradient_id_1 = "paint_linear_#{SecureRandom.uuid}"
+        @logo_url = logo_url
+        @additional_img_attrs = additional_img_attrs
+        @additional_link_attrs = additional_link_attrs
       end
 
       def logo_href

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

@@ -3,7 +3,7 @@
 
   <div class="ui-meganav ui-grid-px">
     <div className="mr-24">
-      <%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link)) %>
+      <%= 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)) %>
 

package/src/core/Meganav/component.jsx

@@ -86,7 +86,7 @@ export default function Meganav({ paths, themeName = "white", notice, loginLink
       {notice && <Notice {...notice.props} config={notice.config} />}
       <div className="ui-meganav ui-grid-px">
         <div className="mr-24">
-          <Logo dataId="meganav-logo" href={urlBase} />
+          <Logo dataId="meganav-logo" href={urlBase} logoUrl={paths.logo} />
         </div>
 
         <MeganavItemsDesktop panels={panels} paths={paths} theme={theme} absUrl={absUrl} />

package/src/core/Meganav/component.rb

@@ -6,6 +6,7 @@ module AblyUi
     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

package/src/core/core.rb

@@ -30,6 +30,10 @@ module AblyUi
     end
 
     module SharedAssets
+      def ably_logo
+        asset_path 'ably_ui/core/images/ably-logo.png'
+      end
+
       def ably_stack_path
         asset_path 'ably_ui/core/images/ably-stack.svg'
       end

package/src/core/icons/icon-gui-filter-flow-step-1.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1.68174 2.24805H22.3939C22.6536 2.24792 22.904 2.32367 23.1187 2.46046C23.3329 2.59689 23.5017 2.78725 23.6159 3.00505C23.7296 3.22241 23.7879 3.46429 23.7888 3.70656C23.7898 3.94884 23.7336 4.1907 23.6217 4.40889L23.618 4.41617L21.547 8.34759C21.4172 8.59388 21.1618 8.74805 20.8834 8.74805H3.19524C2.91687 8.74805 2.66141 8.59388 2.53167 8.34759L0.458326 4.41162C0.345422 4.19369 0.288491 3.95179 0.288818 3.70936C0.289149 3.46693 0.346753 3.22517 0.460294 3.00753C0.573964 2.78964 0.74233 2.59905 0.95601 2.46221C1.17049 2.32486 1.42057 2.24847 1.68052 2.24805H1.68174Z" fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.56484 10.248H20.511C20.5111 10.248 20.5109 10.248 20.511 10.248C20.7467 10.2479 20.9747 10.3151 21.171 10.4374C21.367 10.5595 21.5228 10.7307 21.6285 10.9279C21.7338 11.1246 21.7879 11.3441 21.7888 11.5642C21.7897 11.7844 21.7375 12.0038 21.6339 12.2013L21.63 12.2086L19.9356 15.3538C19.8047 15.5966 19.5512 15.748 19.2753 15.748H4.80316C4.52731 15.748 4.27372 15.5966 4.14289 15.3538L2.446 12.204C2.34146 12.0067 2.28851 11.7872 2.28882 11.5669C2.28913 11.3465 2.3427 11.1271 2.44783 10.9301C2.55309 10.7328 2.70836 10.5615 2.90396 10.439C3.10014 10.3161 3.32782 10.2484 3.56365 10.248L3.56484 10.248ZM20.1743 11.748L18.8274 14.248H5.25102L3.90417 11.748H20.1743ZM20.5122 11.748C20.5125 11.748 20.5119 11.748 20.5122 11.748Z" fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.4468 17.248L5.44795 17.248L18.6282 17.248C18.6283 17.248 18.6281 17.248 18.6282 17.248C18.8377 17.248 19.0419 17.3055 19.2194 17.4121C19.3969 17.5187 19.5404 17.6697 19.6388 17.8468C19.7369 18.0234 19.788 18.2218 19.7888 18.4218C19.7896 18.6218 19.7404 18.8202 19.6439 18.9976L19.6399 19.005L18.3219 21.3638C18.1894 21.6011 17.9389 21.748 17.6672 21.748H6.41109C6.13935 21.748 5.88888 21.6011 5.75634 21.3638L4.43588 19.0004C4.33849 18.8231 4.28853 18.6246 4.28882 18.4244C4.28911 18.2241 4.33965 18.0258 4.43757 17.8488C4.5356 17.6716 4.67873 17.5204 4.85584 17.4135C5.03324 17.3063 5.23713 17.2484 5.4468 17.248ZM18.0651 18.748H6.01314L6.85118 20.248H17.2271L18.0651 18.748Z" fill="currentColor" />
+</svg>

package/src/core/icons/icon-gui-filter-flow-step-2.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M22.3939 2.24805H1.68174ZM1.68174 2.24805L1.68052 2.24805ZM22.3939 2.24805C22.6536 2.24792 22.904 2.32367 23.1187 2.46046C23.3329 2.59689 23.5017 2.78725 23.6159 3.00505C23.7296 3.22241 23.7879 3.46429 23.7888 3.70656C23.7898 3.94884 23.7336 4.1907 23.6217 4.40889L23.618 4.41617L21.547 8.34759C21.4172 8.59388 21.1618 8.74805 20.8834 8.74805H3.19524C2.91687 8.74805 2.66141 8.59388 2.53167 8.34759L0.458326 4.41162C0.345422 4.19369 0.288491 3.95179 0.28882 3.70936C0.289149 3.46693 0.346753 3.22517 0.460294 3.00753C0.573964 2.78964 0.74233 2.59905 0.95601 2.46221C1.17049 2.32486 1.42057 2.24847 1.68052 2.24805M22.2745 3.74805H1.80416L3.64786 7.24805H20.4308L22.2745 3.74805ZM22.395 3.74805C22.3953 3.74805 22.3947 3.74805 22.395 3.74805Z" fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.56484 10.248H20.511C20.7467 10.2479 20.9747 10.3151 21.171 10.4374C21.367 10.5595 21.5228 10.7307 21.6285 10.9279C21.7338 11.1246 21.7879 11.3441 21.7888 11.5642C21.7897 11.7844 21.7375 12.0038 21.6339 12.2013L21.63 12.2086L19.9356 15.3538C19.8047 15.5966 19.5512 15.748 19.2753 15.748H4.80316C4.52731 15.748 4.27372 15.5966 4.14289 15.3538L2.446 12.204C2.34146 12.0067 2.28851 11.7872 2.28882 11.5669C2.28913 11.3465 2.3427 11.1271 2.44783 10.9301C2.55309 10.7328 2.70836 10.5615 2.90396 10.439C3.10014 10.3161 3.32782 10.2484 3.56365 10.248L3.56484 10.248Z" fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.4468 17.248L5.44795 17.248L18.6282 17.248C18.6283 17.248 18.6281 17.248 18.6282 17.248C18.8377 17.248 19.0419 17.3055 19.2194 17.4121C19.3969 17.5187 19.5404 17.6697 19.6388 17.8468C19.7369 18.0234 19.788 18.2218 19.7888 18.4218C19.7896 18.6218 19.7404 18.8202 19.6439 18.9976L19.6399 19.005L18.3219 21.3638C18.1894 21.6011 17.9389 21.748 17.6672 21.748H6.41109C6.13935 21.748 5.88888 21.6011 5.75634 21.3638L4.43588 19.0004C4.33849 18.8231 4.28853 18.6246 4.28882 18.4244C4.28911 18.2241 4.33965 18.0258 4.43757 17.8488C4.5356 17.6716 4.67873 17.5204 4.85584 17.4135C5.03324 17.3063 5.23713 17.2484 5.4468 17.248ZM18.0651 18.748H6.01314L6.85118 20.248H17.2271L18.0651 18.748Z" fill="currentColor" />
+</svg>

package/src/core/icons/icon-gui-filter-flow-step-3.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M22.3939 2.24805H1.68174ZM1.68174 2.24805L1.68052 2.24805ZM22.3939 2.24805C22.6536 2.24792 22.904 2.32367 23.1187 2.46046C23.3329 2.59689 23.5017 2.78725 23.6159 3.00505C23.7296 3.22241 23.7879 3.46429 23.7888 3.70656C23.7898 3.94884 23.7336 4.1907 23.6217 4.40889L23.618 4.41617L21.547 8.34759C21.4172 8.59388 21.1618 8.74805 20.8834 8.74805H3.19524C2.91687 8.74805 2.66141 8.59388 2.53167 8.34759L0.458326 4.41162C0.345422 4.19369 0.288491 3.95179 0.28882 3.70936C0.289149 3.46693 0.346753 3.22517 0.460294 3.00753C0.573964 2.78964 0.74233 2.59905 0.95601 2.46221C1.17049 2.32486 1.42057 2.24847 1.68052 2.24805M22.2745 3.74805H1.80416L3.64786 7.24805H20.4308L22.2745 3.74805ZM22.395 3.74805C22.3953 3.74805 22.3947 3.74805 22.395 3.74805Z" fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.56484 10.248H20.511C20.5111 10.248 20.5109 10.248 20.511 10.248C20.7467 10.2479 20.9747 10.3151 21.171 10.4374C21.367 10.5595 21.5228 10.7307 21.6285 10.9279C21.7338 11.1246 21.7879 11.3441 21.7888 11.5642C21.7897 11.7844 21.7375 12.0038 21.6339 12.2013L21.63 12.2086L19.9356 15.3538C19.8047 15.5966 19.5512 15.748 19.2753 15.748H4.80316C4.52731 15.748 4.27372 15.5966 4.14289 15.3538L2.446 12.204C2.34146 12.0067 2.28851 11.7872 2.28882 11.5669C2.28913 11.3465 2.3427 11.1271 2.44783 10.9301C2.55309 10.7328 2.70836 10.5615 2.90396 10.439C3.10014 10.3161 3.32782 10.2484 3.56365 10.248L3.56484 10.248ZM20.1743 11.748L18.8274 14.248H5.25102L3.90417 11.748H20.1743ZM20.5122 11.748C20.5125 11.748 20.5119 11.748 20.5122 11.748Z" fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.4468 17.248L5.44795 17.248L18.6282 17.248C18.8377 17.248 19.0419 17.3055 19.2194 17.4121C19.3969 17.5187 19.5404 17.6697 19.6388 17.8468C19.7369 18.0234 19.788 18.2218 19.7888 18.4218C19.7896 18.6218 19.7404 18.8202 19.6439 18.9976L19.6399 19.005L18.3219 21.3638C18.1894 21.6011 17.9389 21.748 17.6672 21.748H6.41109C6.13935 21.748 5.88888 21.6011 5.75634 21.3638L4.43588 19.0004C4.33849 18.8231 4.28853 18.6246 4.28882 18.4244C4.28911 18.2241 4.33965 18.0258 4.43757 17.8488C4.5356 17.6716 4.67873 17.5204 4.85584 17.4135C5.03324 17.3063 5.23713 17.2484 5.4468 17.248Z" fill="currentColor" />
+</svg>

package/src/core/icons/icon-gui-resources.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5C4.30964 1.5 3.75 2.05964 3.75 2.75V3.75H5C5.41421 3.75 5.75 4.08579 5.75 4.5C5.75 4.91421 5.41421 5.25 5 5.25H3.75V6.75H5C5.41421 6.75 5.75 7.08579 5.75 7.5C5.75 7.91421 5.41421 8.25 5 8.25H3.75V9.75H5C5.41421 9.75 5.75 10.0858 5.75 10.5C5.75 10.9142 5.41421 11.25 5 11.25H3.75V12.75H5C5.41421 12.75 5.75 13.0858 5.75 13.5C5.75 13.9142 5.41421 14.25 5 14.25H3.75V15.75H5C5.41421 15.75 5.75 16.0858 5.75 16.5C5.75 16.9142 5.41421 17.25 5 17.25H3.75V18.75H5C5.41421 18.75 5.75 19.0858 5.75 19.5C5.75 19.9142 5.41421 20.25 5 20.25H3.75V21.25C3.75 21.9404 4.30964 22.5 5 22.5H18.5C19.1904 22.5 19.75 21.9404 19.75 21.25V19.75H12C10.4812 19.75 9.25 18.5188 9.25 17V12C9.25 10.4812 10.4812 9.25 12 9.25H19.75V3.75C19.75 2.50736 18.7426 1.5 17.5 1.5H5ZM2.25 2.75V3.75H1C0.585786 3.75 0.25 4.08579 0.25 4.5C0.25 4.91421 0.585786 5.25 1 5.25H2.25V6.75H1C0.585786 6.75 0.25 7.08579 0.25 7.5C0.25 7.91421 0.585786 8.25 1 8.25H2.25V9.75H1C0.585786 9.75 0.25 10.0858 0.25 10.5C0.25 10.9142 0.585786 11.25 1 11.25H2.25V12.75H1C0.585786 12.75 0.25 13.0858 0.25 13.5C0.25 13.9142 0.585786 14.25 1 14.25H2.25V15.75H1C0.585786 15.75 0.25 16.0858 0.25 16.5C0.25 16.9142 0.585786 17.25 1 17.25H2.25V18.75H1C0.585786 18.75 0.25 19.0858 0.25 19.5C0.25 19.9142 0.585786 20.25 1 20.25H2.25V21.25C2.25 22.7688 3.48122 24 5 24H18.5C20.0188 24 21.25 22.7688 21.25 21.25V19.7388C22.6516 19.6125 23.75 18.4345 23.75 17V12C23.75 10.5655 22.6516 9.38752 21.25 9.26121V3.75C21.25 1.67893 19.5711 0 17.5 0H5C3.48122 0 2.25 1.23122 2.25 2.75ZM20.5 10.75H12C11.3096 10.75 10.75 11.3096 10.75 12V17C10.75 17.6904 11.3096 18.25 12 18.25H20.5H21C21.6904 18.25 22.25 17.6904 22.25 17V12C22.25 11.3096 21.6904 10.75 21 10.75H20.5ZM12.5 4.25C12.5 3.42157 13.1716 2.75 14 2.75H17C17.8284 2.75 18.5 3.42157 18.5 4.25V5.25C18.5 6.07843 17.8284 6.75 17 6.75H14C13.1716 6.75 12.5 6.07843 12.5 5.25V4.25ZM14 3.75C13.7239 3.75 13.5 3.97386 13.5 4.25V5.25C13.5 5.52614 13.7239 5.75 14 5.75H17C17.2761 5.75 17.5 5.52614 17.5 5.25V4.25C17.5 3.97386 17.2761 3.75 17 3.75H14ZM15.5 13.2582L17.4746 14.4992L15.5 15.7402V13.2582ZM18.0421 15.3236C18.6526 14.9399 18.6526 14.0585 18.0421 13.6747L16.0176 12.4024C15.377 11.9998 14.5 12.4363 14.5 13.2268V15.7716C14.5 16.5621 15.377 16.9986 16.0176 16.596L18.0421 15.3236Z" fill="currentColor" />
+</svg>