Skip to content

Commit

Permalink
Merge pull request #120 from ConduitIO/james/redesign-global-header
Browse files Browse the repository at this point in the history
feat: add links block to global header
  • Loading branch information
jmar910 authored Jul 17, 2023
2 parents 2068d8a + 7d50ae0 commit fef2136
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 38 deletions.
5 changes: 5 additions & 0 deletions .changeset/tricky-days-prove.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"mx-ui-components": minor
---

feat: add links block to global header
10 changes: 5 additions & 5 deletions addon/components/mox/global-header.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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}}

Expand Down
31 changes: 6 additions & 25 deletions stories/mox-global-header.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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"
Expand Down
16 changes: 8 additions & 8 deletions tests/integration/components/mox/global-header-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">
<div>
<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>
Expand Down

0 comments on commit fef2136

Please sign in to comment.