feat: add links block to global header

ConduitIO · Jul 17, 2023 · 877f52f · 877f52f
1 parent 2068d8a
commit 877f52f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 37 deletions.
diff --git a/addon/components/mox/global-header.hbs b/addon/components/mox/global-header.hbs
@@ -22,17 +22,17 @@
         ></path>
       </svg>
     </a>
-    {{#if (has-block "env-switcher")}}
-      <div class="text-white">
-        {{yield to="env-switcher"}}
+    {{#if (has-block "global-links")}}
+      <div>
+        {{yield to="global-links"}}
       </div>
     {{/if}}
   </div>
 
   <div class="flex items-center space-x-2 text-white">
-    {{#if (has-block "help-menu")}}
+    {{#if (has-block "env-switcher")}}
       <div>
-        {{yield to="help-menu"}}
+        {{yield to="env-switcher"}}
       </div>
     {{/if}}
 

diff --git a/stories/mox-global-header.stories.js b/stories/mox-global-header.stories.js
@@ -13,6 +13,12 @@ const Template = () => ({
   template: hbs`
   <div class="w-container">
 	<Mox::GlobalHeader>
+    <:global-links>
+      <Mox::Tabs>
+        <Mox::Tabs::Item class="text-base" @route="/">Applications</Mox::Tabs::Item>
+        <Mox::Tabs::Item class="text-base" @route="">Resources</Mox::Tabs::Item>
+      </Mox::Tabs>
+    </:global-links>
     <:env-switcher>
       <button type="button" class="text-left text-white focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-purple-500 focus:outline-none px-4" >
         <div class="uppercase text-xs" >Don Data</div>
@@ -29,31 +35,6 @@ const Template = () => ({
         </div>
       </button>
     </:env-switcher>
-    <:help-menu>
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-        stroke="white"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M9.08984 9.00057C9.32495 8.33224 9.789 7.76868 10.3998 7.4097C11.0106 7.05073 11.7287 6.91951 12.427 7.03928C13.1253 7.15906 13.7587 7.52209 14.2149 8.0641C14.6712 8.6061 14.9209 9.29209 14.9198 10.0006C14.9198 12.0006 11.9198 13.0006 11.9198 13.0006"
-        stroke="white"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M12 17H12.01"
-        stroke="white"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-    </:help-menu>
     <:user-menu>
       <img
         class="h-8 w-8 rounded-full"

diff --git a/tests/integration/components/mox/global-header-test.js b/tests/integration/components/mox/global-header-test.js
@@ -11,34 +11,34 @@ module('Unit | Component | mox/global-header', function (hooks) {
   test('it renders the header correctly', async function (assert) {
     await render(hbs`
 	<Mox::GlobalHeader>
+    <:global-links>
+      <div>Global Links</div>
+    </:global-links>
 		<:env-switcher>
             <div>Env switcher</div>
 		</:env-switcher>
-		<:help-menu>
-            <div>Help menu</div>
-		</:help-menu>
 		<:user-menu>
             <div>User menu</div>
 		</:user-menu>
 	</Mox::GlobalHeader>
     `);
 
     assert.dom('[data-test-global-header]').hasTagName('header');
+    assert.dom('[data-test-global-header]').containsText('Global links');
     assert.dom('[data-test-global-header]').containsText('Env switcher');
-    assert.dom('[data-test-global-header]').containsText('Help menu');
     assert.dom('[data-test-global-header]').containsText('User menu');
   });
 
   test('it is accessible', async function (assert) {
     await render(hbs`
       <div class="bg-gray-900">
         <Mox::GlobalHeader>
+          <:global-links>
+            <div>Global Links</div>
+          </:global-links>
           <:env-switcher>
             <div>Env switcher</div>
           </:env-switcher>
-          <:help-menu>
-            <div>Help menu</div>
-          </:help-menu>
           <:user-menu>
             <div>User menu</div>
           </:user-menu>