Add icon to header to link to User Guide

packages/frontend/app/components/ilios-header.hbs

@@ -15,5 +15,6 @@
     {{#if this.session.isAuthenticated}}
       <UserMenu />
     {{/if}}
+    <UserGuideLink />
   </div>
 </header>

packages/frontend/app/components/user-guide-link.hbs

@@ -0,0 +1,13 @@
+<div class="user-guide-link" data-test-user-guide-link>
+  <a
+    href="https://iliosproject.gitbook.io/ilios-user-guide"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <FaIcon
+      @icon="circle-question"
+      @title={{t "general.iliosUserGuide"}}
+      data-test-user-guide-link-icon
+    />
+  </a>
+</div>

packages/frontend/app/components/user-menu.hbs

@@ -1,6 +1,6 @@
 {{#let (unique-id) as |templateId|}}
   <nav
-    class="{{if this.isOpen "is-open"}} user-menu"
+    class="user-menu{{if this.isOpen " is-open"}}"
     aria-label={{t "general.userMenu"}}
     {{did-insert (set this.element)}}
     {{! template-lint-disable no-invalid-interactive }}

packages/frontend/app/styles/components.scss

@@ -57,6 +57,7 @@
 @import "components/pending-user-updates";
 @import "components/unassigned-students-summary";
 @import "components/update-notification";
+@import "components/user-guide-link";
 @import "components/user-menu";
 @import "components/user-profile-calendar";
 @import "components/user-profile";

packages/frontend/app/styles/components/ilios-header.scss

@@ -22,12 +22,12 @@
     display: grid;
     justify-content: end;
     grid-template-areas:
-      ". locale user"
-      "search search search";
+      ". locale user guide"
+      "search search search search";
     row-gap: 0.25rem;
 
     @include m.for-tablet-and-up {
-      grid-template-areas: "search locale user";
+      grid-template-areas: "search locale user guide";
     }
 
     .locale-chooser {
@@ -36,6 +36,9 @@
     .user-menu {
       grid-area: user;
     }
+    .user-guide-link {
+      grid-area: guide;
+    }
 
     .global-search-box {
       grid-area: search;

packages/frontend/app/styles/components/user-guide-link.scss

@@ -0,0 +1,27 @@
+@use "../ilios-common/mixins" as cm;
+@use "../ilios-common/colors" as c;
+@use "../mixins" as m;
+
+.user-guide-link {
+  @include m.header-menu;
+
+  @include cm.for-tablet-and-up {
+    margin-left: 0.25rem;
+    margin-right: 0.5rem;
+  }
+
+  @include cm.for-phone-only {
+    /* stylelint-disable property-disallowed-list */
+    font-size: 3.5vw;
+  }
+
+  a {
+    svg {
+      align-items: center;
+      color: c.$white;
+      display: flex;
+      height: 1.85em;
+      width: 1.85em;
+    }
+  }
+}

packages/frontend/tests/integration/components/user-guide-link-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setLocale, setupIntl } from 'ember-intl/test-support';
+
+module('Integration | Component | user-guide-link', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks, 'en-us');
+
+  test('it renders', async function (assert) {
+    await render(hbs`<UserGuideLink />`);
+
+    assert.dom('[data-test-user-guide-link]').exists();
+    assert.dom('[data-test-user-guide-link-icon]').exists();
+    assert.dom('[data-test-user-guide-link-icon]').hasText('Ilios User Guide');
+
+    await setLocale('es');
+
+    assert.dom('[data-test-user-guide-link-icon]').hasText('Ilios Guía de usuario');
+
+    await setLocale('fr');
+
+    assert.dom('[data-test-user-guide-link-icon]').hasText("Ilios Guide d'utilisation");
+  });
+});

packages/ilios-common/addon/components/fa-icon.hbs

@@ -15,6 +15,8 @@
 
   {{#if (eq @prefix "brands")}}
     <use xlink:href="/fontawesome/brands.svg#{{@icon}}"></use>
+  {{else if (eq @prefix "regular")}}
+    <use xlink:href="/fontawesome/regular.svg#{{@icon}}"></use>
   {{else}}
     <use xlink:href="/fontawesome/solid.svg#{{@icon}}"></use>
   {{/if}}

packages/ilios-common/translations/en-us.yaml

@@ -148,6 +148,7 @@ general:
   hours: Hours
   icsInstructions: "To add your Ilios calendar to another application or service, use this URL.  This URL is like a password. Anyone who knows it can view your calendar!"
   ilios: Ilios
+  iliosUserGuide: Ilios User Guide
   ilm: ILM
   ilmDue: ILM - Due
   inactive: inactive

packages/ilios-common/translations/es.yaml

@@ -148,6 +148,7 @@ general:
   hours: Horas
   icsInstructions: "Para agregar tu calendario a otra aplicación o servicio, utiliza esta URL.  Esta URL es como una contraseña.  ¡Cualquiera persona que la sepa puede ver tu calendario!"
   ilios: Ilios
+  iliosUserGuide: Ilios Guía de usuario
   ilm: ILM
   ilmDue: AI - Debido Por
   inactive: inactivo

packages/ilios-common/translations/fr.yaml

@@ -148,6 +148,7 @@ general:
   hours: Heures
   icsInstructions: "Pour ajouter votre calendrier à des services ou applications autre, utilisez cette URL. Cette URL comme un mot de passe. Toutes les personnes qui le connaissent pouvez voir votre calendrier!"
   ilios: Ilios
+  iliosUserGuide: Ilios Guide d'utilisation
   ilm: ILM
   ilmDue: ILM - Échéance
   inactive: inactif