-
Notifications
You must be signed in to change notification settings - Fork 99
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add alert-style badges to user menu (#73)
* Add highlight dot to announce menuItem features * Write tests
- Loading branch information
Showing
9 changed files
with
233 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import Component from "@glimmer/component"; | ||
| import { inject as service } from "@ember/service"; | ||
| import { action } from "@ember/object"; | ||
| import ConfigService from "hermes/services/config"; | ||
| import SessionService from "hermes/services/session"; | ||
| import RouterService from "@ember/routing/router-service"; | ||
| import AuthenticatedUserService, { | ||
| AuthenticatedUser, | ||
| } from "hermes/services/authenticated-user"; | ||
| import window from "ember-window-mock"; | ||
| import { tracked } from "@glimmer/tracking"; | ||
|
|
||
| interface NavComponentSignature { | ||
| Args: {}; | ||
| } | ||
|
|
||
| export default class NavComponent extends Component<NavComponentSignature> { | ||
| @service("config") declare configSvc: ConfigService; | ||
| @service declare session: SessionService; | ||
| @service declare router: RouterService; | ||
| @service declare authenticatedUser: AuthenticatedUserService; | ||
|
|
||
| protected get profile(): AuthenticatedUser { | ||
| return this.authenticatedUser.info; | ||
| } | ||
|
|
||
| protected get currentRouteName(): string { | ||
| return this.router.currentRouteName; | ||
| } | ||
|
|
||
| /** | ||
| * The default query params for the browse screens. | ||
| * Ensures a clear filter state when navigating tabs. | ||
| */ | ||
| protected defaultBrowseScreenQueryParams = { | ||
| docType: [], | ||
| owners: [], | ||
| page: 1, | ||
| product: [], | ||
| status: [], | ||
| sortBy: "dateDesc", | ||
| }; | ||
|
|
||
| /** | ||
| * Whether to the "new" badge should appear on the email notifications menuitem. | ||
| * Will be false if the user has previously closed the dropdown. | ||
| */ | ||
| @tracked protected emailNotificationsHighlightIsShown = | ||
| window.localStorage.getItem("emailNotificationsHighlightIsShown") !== | ||
| "false"; | ||
|
|
||
| /** | ||
| * Whether a highlight icon should appear over the user avatar. | ||
| * True when the user hasn't seen the menu's active highlights, | ||
| * (i.e., when we've just announced a feature), as determined by localStorage. | ||
| * Set false when the user menu is opened. | ||
| */ | ||
| @tracked protected userMenuHighlightIsShown = | ||
| this.emailNotificationsHighlightIsShown; | ||
|
|
||
| /** | ||
| * The actions to take when the dropdown menu is opened. | ||
| * Force-hides the highlight icon if it's open. | ||
| * (We assume the user to have seen the highlight when they open the menu.) | ||
| */ | ||
| @action protected onDropdownOpen(): void { | ||
| this.userMenuHighlightIsShown = false; | ||
| window.localStorage.setItem("emailNotificationsHighlightIsShown", "false"); | ||
| } | ||
|
|
||
| /** | ||
| * The actions to take when the dropdown menu is closed. | ||
| * Force-hides the emailNotificationsHighlight if it's visible. | ||
| */ | ||
| @action protected onDropdownClose(): void { | ||
| this.emailNotificationsHighlightIsShown = false; | ||
| } | ||
|
|
||
| @action protected invalidateSession(): void { | ||
| this.session.invalidate(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <div | ||
| data-test-user-menu-highlight | ||
| class="absolute h-4 w-4 top-[3px] left-[33px] z-20 -translate-y-1/2 -translate-x-1/2 grid place-items-center" | ||
| > | ||
| <div | ||
| class="h-4 w-4 absolute bg-gradient-to-tr from-color-palette-purple-200 to-color-palette-purple-100 rounded-full opacity-75" | ||
| ></div> | ||
|
|
||
| <div | ||
| class="h-2.5 w-2.5 rounded-full bg-color-page-faint border-4 border-color-palette-purple-200 relative" | ||
| ></div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import Component from "@glimmer/component"; | ||
|
|
||
| interface HeaderUserMenuHighlightsSignature { | ||
| Args: {}; | ||
| } | ||
|
|
||
| export default class HeaderUserMenuHighlights extends Component<HeaderUserMenuHighlightsSignature> {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import { module, test } from "qunit"; | ||
| import { setupRenderingTest } from "ember-qunit"; | ||
| import { click, render } from "@ember/test-helpers"; | ||
| import { hbs } from "ember-cli-htmlbars"; | ||
| import { setupWindowMock } from "ember-window-mock/test-support"; | ||
| import AuthenticatedUserService from "hermes/services/authenticated-user"; | ||
| import { setupMirage } from "ember-cli-mirage/test-support"; | ||
| import window from "ember-window-mock"; | ||
|
|
||
| module("Integration | Component | header/nav", function (hooks) { | ||
| setupRenderingTest(hooks); | ||
| setupWindowMock(hooks); | ||
| setupMirage(hooks); | ||
|
|
||
| hooks.beforeEach(function () { | ||
| let authenticatedUserSvc = this.owner.lookup( | ||
| "service:authenticated-user" | ||
| ) as AuthenticatedUserService; | ||
|
|
||
| authenticatedUserSvc._info = { | ||
| email: "[email protected]", | ||
| given_name: "Foo", | ||
| name: "Foo Bar", | ||
| picture: "", | ||
| subscriptions: [], | ||
| }; | ||
| }); | ||
|
|
||
| test("it renders correctly", async function (assert) { | ||
| await render(hbs` | ||
| <Header::Nav /> | ||
| `); | ||
|
|
||
| assert.dom(".header-nav").exists(); | ||
| assert.dom('[data-test-nav-link="all"]').hasAttribute("href", "/all"); | ||
| assert.dom('[data-test-nav-link="my"]').hasAttribute("href", "/my"); | ||
| assert.dom('[data-test-nav-link="drafts"]').hasAttribute("href", "/drafts"); | ||
|
|
||
| assert.dom("[data-test-nav-search-bar]").exists(); | ||
|
|
||
| await click("[data-test-user-menu-toggle]"); | ||
|
|
||
| assert.dom("[data-test-user-menu-title]").hasText("Foo Bar"); | ||
| assert.dom("[data-test-user-menu-email]").hasText("[email protected]"); | ||
|
|
||
| assert | ||
| .dom('[data-test-user-menu-item="email-notifications"]') | ||
| .hasText("Email notifications"); | ||
|
|
||
| assert.dom('[data-test-user-menu-item="sign-out"]').hasText("Sign out"); | ||
| }); | ||
|
|
||
| test("it shows an icon when the user menu has something to highlight", async function (assert) { | ||
| await render(hbs` | ||
| <Header::Nav /> | ||
| `); | ||
|
|
||
| assert.equal( | ||
| window.localStorage.getItem("emailNotificationsHighlightIsShown"), | ||
| null | ||
| ); | ||
|
|
||
| assert.dom("[data-test-user-menu-highlight]").exists("highlight is shown"); | ||
|
|
||
| await click("[data-test-user-menu-toggle]"); | ||
|
|
||
| assert | ||
| .dom("[data-test-user-menu-highlight]") | ||
| .doesNotExist("highlight is hidden when the menu is open"); | ||
|
|
||
| assert | ||
| .dom(".highlighted-new .hds-dropdown-list-item__interactive-text") | ||
| .hasPseudoElementStyle( | ||
| "after", | ||
| { content: '"New"' }, | ||
| "highlighted link has the correct class and pseudoElement text" | ||
| ); | ||
|
|
||
| // close and reopen the menu | ||
| await click("[data-test-user-menu-toggle]"); | ||
| await click("[data-test-user-menu-toggle]"); | ||
|
|
||
| assert | ||
| .dom(".highlighted-new") | ||
| .doesNotExist("highlight is hidden after the menu is closed"); | ||
| }); | ||
| }); |