@ably/ui 8.7.0-dev.6c8bb4b → 8.7.0-dev.6dec76a

package/src/core/MeganavContentPlatform/component.jsx

@@ -45,12 +45,6 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
               <p className="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
             </a>
           </li>
-          <li>
-            <a href={absUrl("/examples/live-charts")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Live Charts</p>
-              <p className="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
-            </a>
-          </li>
           <li>
             <a href={absUrl("/examples/live-cursors")} className="ui-meganav-media group">
               <p className="ui-meganav-media-heading">Live Cursors</p>
@@ -63,6 +57,12 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
               <p className="ui-meganav-media-copy">See when a user is typing a message.</p>
             </a>
           </li>
+          <li>
+            <a href={absUrl("/examples/chat-admin-privileges")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Chat Admin Privileges</p>
+              <p className="ui-meganav-media-copy">Control who can take admin actions in a digital space.</p>
+            </a>
+          </li>
         </ul>
         <FeaturedLink url={absUrl("/examples")} textSize="text-p3">
           Explore all live examples

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

@@ -3,42 +3,51 @@
   <section class="grid grid-cols-12 ui-grid-gap-x w-full">
     <div class="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
       <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
-          Use cases
+          Solutions
         </h3>
       <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
         <li>
-          <%= link_to abs_url("/solutions/live-updates-results-metrics"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-live-updates-results-metrics-col", size: "2.5rem")) %>
+          <%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
             <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Live updates, results & metrics</p>
-              <p class="ui-meganav-media-copy">Deliver live updates to keep users informed.</p>
+              <p class="ui-meganav-media-heading">Chat</p>
+              <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
             </div>
           <% end %>
         </li>
         <li>
-          <%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
+          <%= link_to abs_url("/solutions/multiplayer-collaboration"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
             <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Chat</p>
-              <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
+              <p class="ui-meganav-media-heading">Multiplayer Collaboration</p>
+              <p class="ui-meganav-media-copy">Bring collaborative multiplayer experiences to your users.</p>
             </div>
           <% end %>
         </li>
         <li>
-          <%= link_to abs_url("/solutions/virtual-events"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-virtual-events-col", size: "2.5rem")) %>
+          <%= link_to abs_url("/solutions/data-broadcast"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-live-updates-results-metrics-col", size: "2.5rem")) %>
             <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Virtual Events</p>
-              <p class="ui-meganav-media-copy">Power engaging virtual events with realtime features.</p>
+              <p class="ui-meganav-media-heading">Data Broadcast</p>
+              <p class="ui-meganav-media-copy">Broadcast realtime event data to millions of devices around the globe.</p>
             </div>
           <% end %>
         </li>
         <li>
-          <%= link_to abs_url("/solutions/multi-user-virtual-spaces"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
+          <%= link_to abs_url("/solutions/data-synchronization"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-virtual-events", size: "2.5rem")) %>
             <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Multi-user virtual spaces</p>
-              <p class="ui-meganav-media-copy">Build live and interactive multi-user applications.</p>
+              <p class="ui-meganav-media-heading">Data Synchronization</p>
+              <p class="ui-meganav-media-copy">Keep your frontend and backend in realtime sync, at global scale.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-kafka-at-the-edge-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
+              <p class="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
             </div>
           <% end %>
         </li>
@@ -80,6 +89,14 @@
             <p class="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
           <% end %>
         </li>
+      </ul>
+    </div>
+
+    <div class="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 bg-white">
+      <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
+        &nbsp;
+      </h3>
+      <ul aria-labelledby="meganav-use-cases-panel-solutions">
         <li>
           <%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
             <p class="ui-meganav-media-heading">eCommerce & Retail</p>
@@ -106,26 +123,6 @@
         </li>
       </ul>
     </div>
-
-    <div class="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 bg-white">
-      <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
-        Solutions
-      </h3>
-      <ul aria-labelledby="meganav-use-cases-panel-solutions">
-        <li>
-          <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
-            <p class="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Asset Tracking</p>
-            <p class="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
-          <% end %>
-        </li>
-      </ul>
-    </div>
   </section>
   <div class="ui-meganav-content-spacer"></div>
 </div>

package/src/core/MeganavContentUseCases/component.jsx

@@ -9,42 +9,51 @@ const MeganavContentUseCases = ({ absUrl }) => (
     <section className="grid grid-cols-12 ui-grid-gap-x w-full">
       <div className="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
         <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
-          Use cases
+          Solutions
         </h3>
         <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
           <li>
-            <a href={absUrl("/solutions/live-updates-results-metrics")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-live-updates-results-metrics-col" size="2.5rem" />
+            <a href={absUrl("/solutions/chat")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-chat-stack-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Live updates, results & metrics</p>
-                <p className="ui-meganav-media-copy">Deliver live updates to keep users informed.</p>
+                <p className="ui-meganav-media-heading">Chat</p>
+                <p className="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
               </div>
             </a>
           </li>
           <li>
-            <a href={absUrl("/solutions/chat")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-display-chat-stack-col" size="2.5rem" />
+            <a href={absUrl("/solutions/multiplayer-collaboration")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-multi-user-spaces-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Chat</p>
-                <p className="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
+                <p className="ui-meganav-media-heading">Multiplayer Collaboration</p>
+                <p className="ui-meganav-media-copy">Bring collaborative multiplayer experiences to your users.</p>
               </div>
             </a>
           </li>
           <li>
-            <a href={absUrl("/solutions/virtual-events")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-display-virtual-events-col" size="2.5rem" />
+            <a href={absUrl("/solutions/data-broadcast")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-live-updates-results-metrics-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Virtual Events</p>
-                <p className="ui-meganav-media-copy">Power engaging virtual events with realtime features.</p>
+                <p className="ui-meganav-media-heading">Data Broadcast</p>
+                <p className="ui-meganav-media-copy">Broadcast realtime event data to millions of devices around the globe.</p>
               </div>
             </a>
           </li>
           <li>
-            <a href={absUrl("/solutions/multi-user-virtual-spaces")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-multi-user-spaces-col" size="2.5rem" />
+            <a href={absUrl("/solutions/data-synchronization")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-virtual-events" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Data Synchronization</p>
+                <p className="ui-meganav-media-copy">Keep your frontend and backend in realtime sync, at global scale.</p>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/extend-kafka-to-the-edge")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-kafka-at-the-edge-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Multi-user virtual spaces</p>
-                <p className="ui-meganav-media-copy">Build live and interactive multi-user applications.</p>
+                <p className="ui-meganav-media-heading">Extend Kafka to the edge</p>
+                <p className="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
               </div>
             </a>
           </li>
@@ -86,6 +95,14 @@ const MeganavContentUseCases = ({ absUrl }) => (
               <p className="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
             </a>
           </li>
+        </ul>
+      </div>
+
+      <div className="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 bg-white">
+        <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
+          &nbsp;
+        </h3>
+        <ul aria-labelledby="meganav-use-cases-panel-solutions">
           <li>
             <a href={absUrl("/solutions/ecommerce-and-retail")} className="ui-meganav-media group">
               <p className="ui-meganav-media-heading">eCommerce & Retail</p>
@@ -112,26 +129,6 @@ const MeganavContentUseCases = ({ absUrl }) => (
           </li>
         </ul>
       </div>
-
-      <div className="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 bg-white">
-        <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
-          Solutions
-        </h3>
-        <ul aria-labelledby="meganav-use-cases-panel-solutions">
-          <li>
-            <a href={absUrl("/solutions/extend-kafka-to-the-edge")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Extend Kafka to the edge</p>
-              <p className="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/solutions/asset-tracking")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Asset Tracking</p>
-              <p className="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
-            </a>
-          </li>
-        </ul>
-      </div>
     </section>
     <div className="ui-meganav-content-spacer"></div>
   </div>

package/src/core/core.rb

@@ -42,12 +42,16 @@ module AblyUi
         asset_path 'ably_ui/core/images/icon-tech-aws.svg'
       end
 
-      def rocket_list
-        asset_path 'ably_ui/core/images/rocket-list-2021.png'
+      def highest_performer
+        asset_path 'ably_ui/core/images/high-performer-2022.png'
       end
 
-      def flexible_companies
-        asset_path 'ably_ui/core/images/flexible-companies.png'
+      def highest_user_adoption
+        asset_path 'ably_ui/core/images/highest-user-adoption-2022.png'
+      end
+
+      def users_love_us
+        asset_path 'ably_ui/core/images/users-love-us-2022.png'
       end
     end
 

package/src/core/icons/icon-display-kafka-at-the-edge-col.svg

@@ -0,0 +1,8 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 3.59888C9.81598 5.842 3 14.125 3 24C3 33.875 9.81598 42.158 19 44.4011M29 3.59888C32.9541 4.56464 36.4693 6.65 39.1905 9.49999M44.1304 18C44.6962 19.9011 45 21.9151 45 24C45 26.2687 44.6403 28.4533 43.9747 30.5M38.8336 38.8649C36.1649 41.528 32.7834 43.477 29 44.4011" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="42" cy="13.5" r="2" fill="#FF5416"/>
+<circle cx="24" cy="3" r="2" fill="#FF5416"/>
+<circle cx="24" cy="45" r="2" fill="#FF5416"/>
+<circle cx="42" cy="35" r="2" fill="#FF5416"/>
+<path d="M32.8453 25.5085C31.7549 25.5085 30.7774 25.9916 30.108 26.7521L28.3927 25.5378C28.5748 25.0365 28.6793 24.4982 28.6793 23.9347C28.6793 23.381 28.5784 22.8518 28.4023 22.3578L30.1138 21.1564C30.7831 21.9131 31.7581 22.3935 32.8453 22.3935C34.8578 22.3935 36.4954 20.7562 36.4954 18.7434C36.4954 16.7306 34.8578 15.0933 32.8453 15.0933C30.8328 15.0933 29.1952 16.7306 29.1952 18.7434C29.1952 19.1037 29.2496 19.4511 29.3473 19.7801L27.6347 20.9822C26.9193 20.0946 25.8892 19.475 24.7156 19.2858V17.2217C26.369 16.8745 27.6147 15.4054 27.6147 13.6501C27.6147 11.6373 25.9772 10 23.9647 10C21.9521 10 20.3146 11.6373 20.3146 13.6501C20.3146 15.3819 21.5281 16.8328 23.1484 17.2049V19.2958C20.9371 19.6839 19.25 21.6138 19.25 23.9347C19.25 26.267 20.9538 28.2039 23.1811 28.5789V30.7867C21.5442 31.1465 20.3146 32.6063 20.3146 34.3499C20.3146 36.3627 21.9521 38 23.9647 38C25.9772 38 27.6147 36.3627 27.6147 34.3499C27.6147 32.6063 26.3851 31.1465 24.7482 30.7867V28.5788C25.8988 28.3851 26.9099 27.7776 27.618 26.9098L29.3447 28.132C29.2489 28.458 29.1952 28.802 29.1952 29.1586C29.1952 31.1714 30.8328 32.8087 32.8453 32.8087C34.8578 32.8087 36.4954 31.1714 36.4954 29.1586C36.4954 27.1458 34.8578 25.5085 32.8453 25.5085V25.5085ZM32.8453 16.9737C33.8212 16.9737 34.615 17.7678 34.615 18.7434C34.615 19.7191 33.8212 20.5131 32.8453 20.5131C31.8694 20.5131 31.0756 19.7191 31.0756 18.7434C31.0756 17.7678 31.8694 16.9737 32.8453 16.9737V16.9737ZM22.1949 13.6501C22.1949 12.6745 22.9887 11.8804 23.9647 11.8804C24.9406 11.8804 25.7343 12.6745 25.7343 13.6501C25.7343 14.6258 24.9406 15.4198 23.9647 15.4198C22.9887 15.4198 22.1949 14.6258 22.1949 13.6501V13.6501ZM25.7343 34.3499C25.7343 35.3255 24.9406 36.1196 23.9647 36.1196C22.9887 36.1196 22.1949 35.3255 22.1949 34.3499C22.1949 33.3742 22.9887 32.5802 23.9647 32.5802C24.9406 32.5802 25.7343 33.3742 25.7343 34.3499ZM23.9645 26.4028C22.6034 26.4028 21.4961 25.2958 21.4961 23.9347C21.4961 22.5736 22.6034 21.4663 23.9645 21.4663C25.3256 21.4663 26.4328 22.5736 26.4328 23.9347C26.4328 25.2958 25.3256 26.4028 23.9645 26.4028V26.4028ZM32.8453 30.9284C31.8694 30.9284 31.0756 30.1343 31.0756 29.1586C31.0756 28.183 31.8694 27.3889 32.8453 27.3889C33.8212 27.3889 34.615 28.183 34.615 29.1586C34.615 30.1343 33.8212 30.9284 32.8453 30.9284Z" fill="#03020D"/>
+</svg>

package/src/core/icons/icon-tech-apachekafka.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.3062 26.586C30.437 26.586 28.7612 27.4141 27.6137 28.7179L24.6732 26.6362C24.9853 25.7768 25.1645 24.854 25.1645 23.8881C25.1645 22.9389 24.9915 22.0316 24.6897 21.1849L27.6236 19.1252C28.7711 20.4225 30.4424 21.2461 32.3062 21.2461C35.7562 21.2461 38.5635 18.4393 38.5635 14.9888C38.5635 11.5382 35.7562 8.73143 32.3062 8.73143C28.8562 8.73143 26.0489 11.5382 26.0489 14.9888C26.0489 15.6064 26.1422 16.2019 26.3097 16.7659L23.3737 18.8266C22.1473 17.3051 20.3815 16.2428 18.3696 15.9185V12.3801C21.204 11.7848 23.3396 9.26646 23.3396 6.25732C23.3396 2.80681 20.5323 0 17.0823 0C13.6322 0 10.825 2.80681 10.825 6.25732C10.825 9.22616 12.9053 11.7134 15.683 12.3512V15.9356C11.8921 16.601 9 19.9094 9 23.8881C9 27.8862 11.9208 31.2067 15.739 31.8495V35.6343C12.9329 36.2511 10.825 38.7536 10.825 41.7427C10.825 45.1932 13.6322 48 17.0823 48C20.5323 48 23.3396 45.1932 23.3396 41.7427C23.3396 38.7536 21.2317 36.2511 18.4256 35.6343V31.8494C20.3979 31.5172 22.1313 30.4759 23.3451 28.9882L26.3053 31.0834C26.1409 31.6423 26.0489 32.232 26.0489 32.8433C26.0489 36.2938 28.8562 39.1007 32.3062 39.1007C35.7562 39.1007 38.5635 36.2938 38.5635 32.8433C38.5635 29.3928 35.7562 26.586 32.3062 26.586ZM32.3062 11.9549C33.9792 11.9549 35.3399 13.3162 35.3399 14.9888C35.3399 16.6613 33.9792 18.0225 32.3062 18.0225C30.6332 18.0225 29.2725 16.6613 29.2725 14.9888C29.2725 13.3162 30.6332 11.9549 32.3062 11.9549ZM14.0484 6.25732C14.0484 4.58479 15.4093 3.22359 17.0823 3.22359C18.7553 3.22359 20.116 4.58479 20.116 6.25732C20.116 7.92986 18.7553 9.29106 17.0823 9.29106C15.4093 9.29106 14.0484 7.92986 14.0484 6.25732ZM20.116 41.7427C20.116 43.4152 18.7553 44.7764 17.0823 44.7764C15.4093 44.7764 14.0484 43.4152 14.0484 41.7427C14.0484 40.0701 15.4093 38.7089 17.0823 38.7089C18.7553 38.7089 20.116 40.0701 20.116 41.7427ZM17.082 28.1192C14.7487 28.1192 12.8505 26.2213 12.8505 23.8881C12.8505 21.5548 14.7487 19.6566 17.082 19.6566C19.4152 19.6566 21.3134 21.5548 21.3134 23.8881C21.3134 26.2213 19.4152 28.1192 17.082 28.1192ZM32.3062 35.8772C30.6332 35.8772 29.2725 34.5159 29.2725 32.8433C29.2725 31.1708 30.6332 29.8096 32.3062 29.8096C33.9792 29.8096 35.3399 31.1708 35.3399 32.8433C35.3399 34.5159 33.9792 35.8772 32.3062 35.8772Z" fill="#03020D"/>
+</svg>

package/core/DropdownMenuPreview/component.js

@@ -1,6 +0,0 @@
-/******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	
-/******/ 	
-/******/ })()
-;

package/core/DropdownMenuPreview.jsx

@@ -1,6 +0,0 @@
-/******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	
-/******/ 	
-/******/ })()
-;