@ably/ui 8.2.1-dev.ade9a3d → 8.2.1-dev.db8f789

package/src/core/MeganavItemsDesktop/component.jsx

@@ -8,15 +8,16 @@ const MeganavDesktopItems = ({ panels, paths, theme, absUrl }) => (
   <ul className="hidden md:flex" data-id="meganav-items-desktop">
     {MeganavData.panels.map((panel) => {
       const PanelComponent = panels[panel.component];
+      const bgCSS = ["platform-panel", "use-cases-panel"].includes(panel.id) ? "ui-meganav-panel-split-bg" : "";
 
       return (
         <li className="ui-meganav-item" key={panel.id}>
-          <MeganavControl theme={theme} ariaControls={panel.id}>
+          <MeganavControl theme={theme} ariaControls={panel.id} ariaLabel={panel.label}>
             <span className="hidden lg:inline">{panel.label}</span>
             <span className="lg:hidden">{panel.shortLabel}</span>
           </MeganavControl>
 
-          <div className="ui-meganav-panel invisible" id={panel.id} data-id="meganav-panel">
+          <div className={`ui-meganav-panel invisible ${bgCSS}`} id={panel.id} data-id="meganav-panel">
             <PanelComponent paths={paths} absUrl={absUrl} />
           </div>
         </li>

package/src/core/MeganavItemsDesktop/component.rb

@@ -10,6 +10,14 @@ module AblyUi
         @theme_name = theme_name
         @url_base = url_base
       end
+
+      def bg_css(panel_id)
+        if %w[platform-panel use-cases-panel].include?(panel_id)
+          'ui-meganav-panel-split-bg'
+        else
+          ''
+        end
+      end
     end
   end
 end

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

@@ -1,6 +1,6 @@
 <ul class="hidden md:flex items-center">
   <li class="ui-meganav-item relative">
-    <%= render(AblyUi::Core::MeganavControl.new(aria_controls: "account-panel", theme_name: @theme_name, additional_css: "mr-0")) do %>
+    <%= render(AblyUi::Core::MeganavControl.new(aria_controls: "account-panel", aria_label: "Account", theme_name: @theme_name, additional_css: "mr-0")) do %>
       <%= account_name %>
     <% end %>
 

package/src/core/MeganavItemsSignedIn/component.jsx

@@ -17,7 +17,7 @@ const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
   return (
     <ul className="hidden md:flex items-center">
       <li className="ui-meganav-item relative">
-        <MeganavControl ariaControls="account-panel" theme={theme} additionalCSS="mr-0">
+        <MeganavControl ariaControls="account-panel" ariaLabel="Account" theme={theme} additionalCSS="mr-0">
           {accountName}
         </MeganavControl>
 

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

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_222_232)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66634 0.835938C1.65382 0.835938 0.833008 1.65675 0.833008 2.66927V9.33594C0.833008 10.3485 1.65382 11.1693 2.66634 11.1693H3.33301C3.60915 11.1693 3.83301 10.9454 3.83301 10.6693C3.83301 10.3931 3.60915 10.1693 3.33301 10.1693H2.66634C2.2061 10.1693 1.83301 9.79618 1.83301 9.33594V2.66927C1.83301 2.20903 2.2061 1.83594 2.66634 1.83594H9.33301C9.79325 1.83594 10.1663 2.20903 10.1663 2.66927V3.33594C10.1663 3.61208 10.3902 3.83594 10.6663 3.83594C10.9425 3.83594 11.1663 3.61208 11.1663 3.33594V2.66927C11.1663 1.65675 10.3455 0.835938 9.33301 0.835938H2.66634ZM6.66634 4.83594C5.65382 4.83594 4.83301 5.65675 4.83301 6.66927V13.3359C4.83301 14.3485 5.65382 15.1693 6.66634 15.1693H13.333C14.3455 15.1693 15.1663 14.3485 15.1663 13.3359V6.66927C15.1663 5.65675 14.3455 4.83594 13.333 4.83594H6.66634ZM5.83301 6.66927C5.83301 6.20903 6.2061 5.83594 6.66634 5.83594H13.333C13.7932 5.83594 14.1663 6.20903 14.1663 6.66927V13.3359C14.1663 13.7962 13.7932 14.1693 13.333 14.1693H6.66634C6.2061 14.1693 5.83301 13.7962 5.83301 13.3359V6.66927Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_222_232">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>