diff --git a/.changeset/wicked-rooms-wear.md b/.changeset/wicked-rooms-wear.md new file mode 100644 index 00000000000..fe09a5a9e09 --- /dev/null +++ b/.changeset/wicked-rooms-wear.md @@ -0,0 +1,7 @@ +--- +"@hashicorp/design-system-components": minor +--- + + +`AppHeader` - return `close` callback to the `:logo` named block so the menu actions can be hidden programmatically when the component is in a mobile view. + diff --git a/packages/components/src/components/hds/app-header/index.hbs b/packages/components/src/components/hds/app-header/index.hbs index 95d3bfdac49..55e1ad6f2fd 100644 --- a/packages/components/src/components/hds/app-header/index.hbs +++ b/packages/components/src/components/hds/app-header/index.hbs @@ -20,7 +20,7 @@ /> {{/if}} - {{yield to="logo"}} + {{yield (hash close=this.close) to="logo"}} {{#if (not this._isDesktop)}} void; + }, + ]; globalActions?: [ { close: () => void; diff --git a/showcase/app/components/mock/app/header/app-header.gts b/showcase/app/components/mock/app/header/app-header.gts index efb89b74964..8f9d9f66ad4 100644 --- a/showcase/app/components/mock/app/header/app-header.gts +++ b/showcase/app/components/mock/app/header/app-header.gts @@ -44,14 +44,17 @@ export default class MockAppHeaderAppHeader extends Component - <:logo> + <:logo as |actions|> + <:globalActions as |actions|> {{#if this.showOrgPicker}} @@ -62,6 +65,7 @@ export default class MockAppHeaderAppHeader extends Component {{/if}} + <:utilityActions as |actions|> {{#if this.showRegionPicker}} diff --git a/showcase/tests/integration/components/hds/app-header/index-test.js b/showcase/tests/integration/components/hds/app-header/index-test.js index faee8141526..c4b84943633 100644 --- a/showcase/tests/integration/components/hds/app-header/index-test.js +++ b/showcase/tests/integration/components/hds/app-header/index-test.js @@ -87,14 +87,28 @@ module('Integration | Component | hds/app-header/index', function (hooks) { test('it should hide the actions when the "close" function is called in mobile view', async function (assert) { await render(hbs` - <:globalActions as |actions|> + <:logo as |actions|> + + + <:globalActions as |actions|> - <:utilityActions as |actions|> - + <:utilityActions as |actions|> + `); + // test logo actions close + await click('.hds-app-header__menu-button'); + assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-open'); + await click('#test-home-link'); + assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-closed'); + // test global actions close await click('.hds-app-header__menu-button'); assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-open');