Merge branch 'feature-context-help-7.2' into feature-context-help-7.4

src/app/header/context-help-toggle/context-help-toggle.component.html

@@ -1,12 +1,10 @@
-<div>
+<div *ngIf="buttonVisible$ | async">
   <a href="javascript:void(0);"
      role="button"
      (click)="onClick()"
-     [attr.aria-label]="((buttonDisabled$ | async) ? 'nav.context-help-toggle-disabled' : 'nav.context-help-toggle') | translate"
+     [attr.aria-label]="'nav.context-help-toggle' | translate"
-     [title]="((buttonDisabled$ | async) ? 'nav.context-help-toggle-disabled' : 'nav.context-help-toggle') | translate"
+     [title]="'nav.context-help-toggle' | translate"
   >
-    <i class="fas fa-lg fa-fw fa-question-circle"
+    <i class="fas fa-lg fa-fw fa-question-circle ds-context-help-toggle"></i>
-       [class]="(buttonDisabled$ | async) ? 'ds-context-help-toggle-disabled' : 'ds-context-help-toggle-enabled'"
-    ></i>
   </a>
 </div>

src/app/header/context-help-toggle/context-help-toggle.component.scss

@@ -1,13 +1,8 @@
-.ds-context-help-toggle-enabled {
+.ds-context-help-toggle {
   color: var(--ds-header-icon-color);
   background-color: var(--ds-header-bg);
 
-  &:hover, &focus {
+  &:hover, &:focus {
     color: var(--ds-header-icon-color-hover);
   }
 }
-
-.ds-context-help-toggle-disabled {
-  color: grey;
-  background-color: var(--ds-header-bg);
-}

src/app/header/context-help-toggle/context-help-toggle.component.spec.ts

@@ -13,9 +13,9 @@ describe('ContextHelpToggleComponent', () => {
 
   beforeEach(async () => {
     contextHelpService = jasmine.createSpyObj('contextHelpService', [
-      'contextHelpEmpty$', 'toggleIcons'
+      'tooltipCount$', 'toggleIcons'
     ]);
-    contextHelpService.contextHelpEmpty$.and.returnValue(observableOf(true));
+    contextHelpService.tooltipCount$.and.returnValue(observableOf(0));
     await TestBed.configureTestingModule({
       declarations: [ ContextHelpToggleComponent ],
       providers: [
@@ -37,19 +37,17 @@ describe('ContextHelpToggleComponent', () => {
   });
 
   describe('if there are no elements on the page with a tooltip', () => {
-    it('clicking the button does not toggle context help icon visibility', fakeAsync(() => {
+    it('the toggle should not be visible', fakeAsync(() => {
       fixture.detectChanges();
       fixture.whenStable().then(() => {
-        fixture.debugElement.query(By.css('a')).nativeElement.click();
+        expect(fixture.debugElement.query(By.css('div'))).toBeNull();
-        tick();
-        expect(contextHelpService.toggleIcons).toHaveBeenCalledTimes(0);
       });
     }));
   });
 
   describe('if there are elements on the page with a tooltip', () => {
     beforeEach(() => {
-      contextHelpService.contextHelpEmpty$.and.returnValue(observableOf(false));
+      contextHelpService.tooltipCount$.and.returnValue(observableOf(1));
       fixture.detectChanges();
     });
 

src/app/header/context-help-toggle/context-help-toggle.component.ts

@@ -1,33 +1,30 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ContextHelpService } from '../../shared/context-help.service';
-import { TranslateService } from '@ngx-translate/core';
 import { Observable, Subscription, BehaviorSubject } from 'rxjs';
 import { combineLatest } from 'rxjs';
+import { map } from 'rxjs/operators';
 
+/**
+ * Renders a "context help toggle" button that toggles the visibility of tooltip buttons on the page.
+ * If there are no tooltip buttons available on the current page, the toggle is unclickable.
+ */
 @Component({
   selector: 'ds-context-help-toggle',
   templateUrl: './context-help-toggle.component.html',
   styleUrls: ['./context-help-toggle.component.scss']
 })
 export class ContextHelpToggleComponent implements OnInit, OnDestroy {
-  buttonDisabled$: Observable<boolean>;
+  buttonVisible$: Observable<boolean>;
 
   constructor(
     private contextHelpService: ContextHelpService,
-    private translateService: TranslateService
   ) { }
 
-  private clickEvents: BehaviorSubject<null> = new BehaviorSubject(null);
   private subs: Subscription[];
 
   ngOnInit(): void {
-    this.buttonDisabled$ = this.contextHelpService.contextHelpEmpty$();
+    this.buttonVisible$ = this.contextHelpService.tooltipCount$().pipe(map(x => x > 0));
-    this.subs = [
+    this.subs = [this.buttonVisible$.subscribe()];
-      this.buttonDisabled$.subscribe(),
-      combineLatest([this.clickEvents, this.buttonDisabled$])
-        .subscribe(([_, disabled]) =>
-          disabled ? null : this.contextHelpService.toggleIcons())
-    ];
   }
 
   ngOnDestroy() {
@@ -35,6 +32,6 @@ export class ContextHelpToggleComponent implements OnInit, OnDestroy {
   }
 
   onClick() {
-    this.clickEvents.next(null);
+    this.contextHelpService.toggleIcons();
   }
 }

src/app/header/header.component.scss

@@ -15,7 +15,7 @@
   a {
     color: var(--ds-header-icon-color);
 
-    &:hover, &focus {
+    &:hover, &:focus {
       color: var(--ds-header-icon-color-hover);
     }
   }

src/app/search-navbar/search-navbar.component.scss

@@ -22,8 +22,5 @@ a.submit-icon {
     width: 40vw !important;
   }
 
-  a.submit-icon {
-    color: var(--bs-link-color);
-  }
 }
 

src/app/shared/auth-nav-menu/auth-nav-menu.component.scss

@@ -13,9 +13,9 @@
 }
 
 .dropdown-toggle {
-  color: var(--ds-header-icon-color) !important;
+  color: var(--ds-header-icon-color);
 
-  &:hover, &focus {
+  &:hover, &:focus {
     color: var(--ds-header-icon-color-hover);
   }
 }

src/app/shared/context-help.service.ts

@@ -54,9 +54,9 @@ export class ContextHelpService {
   /**
    * Observable that yields true iff there are currently no context help entries in the store.
    */
-  contextHelpEmpty$(): Observable<boolean> {
+  tooltipCount$(): Observable<number> {
     return this.store.pipe(select(allContextHelpSelector))
-      .pipe(map((models: ContextHelpModels) => Object.keys(models).length === 0));
+      .pipe(map((models: ContextHelpModels) => Object.keys(models).length));
   }
 
   /**

src/app/shared/lang-switch/lang-switch.component.scss

@@ -2,12 +2,10 @@
   display:none;
 }
 
-@media screen and (min-width: map-get($grid-breakpoints, md)) {
+.dropdown-toggle {
-  .dropdown-toggle {
+  color: var(--ds-header-icon-color);
-    color: var(--ds-header-icon-color);
 
-    &:hover, &focus {
+  &:hover, &:focus {
-      color: var(--ds-header-icon-color-hover);
+    color: var(--ds-header-icon-color-hover);
-    }
   }
 }

src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.scss

@@ -1,7 +1,7 @@
 .filters {
     a {
         color: var(--bs-body-color);
-        &:hover, &focus {
+        &:hover, &:focus {
           text-decoration: none;
         }
         span.badge {

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss

@@ -1,6 +1,6 @@
 a {
     color: var(--bs-body-color);
-    &:hover, &focus {
+    &:hover, &:focus {
         text-decoration: none;
     }
     span.badge {

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss

@@ -1,6 +1,6 @@
 a {
     color: var(--bs-body-color);
-    &:hover, &focus {
+    &:hover, &:focus {
         text-decoration: none;
     }
     span.badge {

src/assets/i18n/en.json5

@@ -2864,8 +2864,6 @@
 
   "nav.context-help-toggle": "Toggle context help",
 
-  "nav.context-help-toggle-disabled": "No context help available on this page",
-
   "nav.language": "Language switch",
 
   "nav.login": "Log In",