From 2cd4c96c09bfa1572f81c45a5f503fc468fe3637 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Fri, 10 May 2024 11:46:38 -0700
Subject: [PATCH 01/10] pet peeve fix: conditional class moved to end with
 space

---
 packages/frontend/app/components/user-menu.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/app/components/user-menu.hbs b/packages/frontend/app/components/user-menu.hbs
index f716c58ca3..412b38e750 100644
--- a/packages/frontend/app/components/user-menu.hbs
+++ b/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 }}

From 22d3ca520753fc256e1ad2ddb09df6af4b8506f5 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Fri, 10 May 2024 13:01:26 -0700
Subject: [PATCH 02/10] allow FaIcon component to use 'regular' style icons

---
 packages/ilios-common/addon/components/fa-icon.hbs | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/ilios-common/addon/components/fa-icon.hbs b/packages/ilios-common/addon/components/fa-icon.hbs
index 934f4ac84b..c39dc660d1 100644
--- a/packages/ilios-common/addon/components/fa-icon.hbs
+++ b/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}}

From 69738e7357be826db22e94b49d72e54ee94275b5 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Fri, 10 May 2024 13:03:12 -0700
Subject: [PATCH 03/10] added new UserGuideLink component

---
 .../frontend/app/components/user-guide-link.hbs   |  5 +++++
 .../app/styles/components/user-guide-link.scss    | 14 ++++++++++++++
 .../components/user-guide-link-test.js            | 15 +++++++++++++++
 3 files changed, 34 insertions(+)
 create mode 100644 packages/frontend/app/components/user-guide-link.hbs
 create mode 100644 packages/frontend/app/styles/components/user-guide-link.scss
 create mode 100644 packages/frontend/tests/integration/components/user-guide-link-test.js

diff --git a/packages/frontend/app/components/user-guide-link.hbs b/packages/frontend/app/components/user-guide-link.hbs
new file mode 100644
index 0000000000..5d9a211b2c
--- /dev/null
+++ b/packages/frontend/app/components/user-guide-link.hbs
@@ -0,0 +1,5 @@
+<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"></FaIcon>
+  </a>
+</div>
\ No newline at end of file
diff --git a/packages/frontend/app/styles/components/user-guide-link.scss b/packages/frontend/app/styles/components/user-guide-link.scss
new file mode 100644
index 0000000000..c2c46b532b
--- /dev/null
+++ b/packages/frontend/app/styles/components/user-guide-link.scss
@@ -0,0 +1,14 @@
+@use "../ilios-common/mixins" as cm;
+@use "../ilios-common/colors" as c;
+
+.user-guide-link {
+  @include cm.for-tablet-and-up {
+    margin-right: 0.5rem;
+  }
+
+  a {
+    svg {
+      color: c.$white;
+    }
+  }
+}
diff --git a/packages/frontend/tests/integration/components/user-guide-link-test.js b/packages/frontend/tests/integration/components/user-guide-link-test.js
new file mode 100644
index 0000000000..112650a8fd
--- /dev/null
+++ b/packages/frontend/tests/integration/components/user-guide-link-test.js
@@ -0,0 +1,15 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | user-guide-link', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<UserGuideLink />`);
+
+    assert.dom('.user-guide-link').exists();
+    assert.dom('.user-guide-link svg.awesome-icon.fa-circle-question').exists();
+  });
+});

From 82ef841dcf0e32ceef1d6ba215609c446580eb84 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Fri, 10 May 2024 15:02:06 -0700
Subject: [PATCH 04/10] added translation for button title attribute

---
 packages/frontend/app/components/user-guide-link.hbs | 2 +-
 packages/ilios-common/translations/en-us.yaml        | 1 +
 packages/ilios-common/translations/es.yaml           | 1 +
 packages/ilios-common/translations/fr.yaml           | 1 +
 4 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/app/components/user-guide-link.hbs b/packages/frontend/app/components/user-guide-link.hbs
index 5d9a211b2c..0ff7810c38 100644
--- a/packages/frontend/app/components/user-guide-link.hbs
+++ b/packages/frontend/app/components/user-guide-link.hbs
@@ -1,5 +1,5 @@
 <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"></FaIcon>
+    <FaIcon @icon="circle-question" @title={{t "general.iliosUserGuide"}}></FaIcon>
   </a>
 </div>
\ No newline at end of file
diff --git a/packages/ilios-common/translations/en-us.yaml b/packages/ilios-common/translations/en-us.yaml
index 71bdfcc64f..0b65256e0b 100644
--- a/packages/ilios-common/translations/en-us.yaml
+++ b/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
diff --git a/packages/ilios-common/translations/es.yaml b/packages/ilios-common/translations/es.yaml
index 85a0a5fe46..6329e6ecfa 100644
--- a/packages/ilios-common/translations/es.yaml
+++ b/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
diff --git a/packages/ilios-common/translations/fr.yaml b/packages/ilios-common/translations/fr.yaml
index c92cee2347..2f74636d43 100644
--- a/packages/ilios-common/translations/fr.yaml
+++ b/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

From 31605bd00028b8af73049812b4b0110231586124 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Fri, 10 May 2024 15:03:09 -0700
Subject: [PATCH 05/10] add UserGuideLink component to header; added styling
 and updated component test

---
 .../frontend/app/components/ilios-header.hbs  |  1 +
 packages/frontend/app/styles/components.scss  |  1 +
 .../app/styles/components/ilios-header.scss   |  5 ++++-
 .../components/user-guide-link-test.js        | 19 +++++++++++++++++--
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/app/components/ilios-header.hbs b/packages/frontend/app/components/ilios-header.hbs
index 8c4eca5a35..75d81530ee 100644
--- a/packages/frontend/app/components/ilios-header.hbs
+++ b/packages/frontend/app/components/ilios-header.hbs
@@ -15,5 +15,6 @@
     {{#if this.session.isAuthenticated}}
       <UserMenu />
     {{/if}}
+    <UserGuideLink />
   </div>
 </header>
diff --git a/packages/frontend/app/styles/components.scss b/packages/frontend/app/styles/components.scss
index eba8e35e0d..0932bf3305 100644
--- a/packages/frontend/app/styles/components.scss
+++ b/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";
diff --git a/packages/frontend/app/styles/components/ilios-header.scss b/packages/frontend/app/styles/components/ilios-header.scss
index decf306fbf..baefcba25f 100644
--- a/packages/frontend/app/styles/components/ilios-header.scss
+++ b/packages/frontend/app/styles/components/ilios-header.scss
@@ -27,7 +27,7 @@
     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;
diff --git a/packages/frontend/tests/integration/components/user-guide-link-test.js b/packages/frontend/tests/integration/components/user-guide-link-test.js
index 112650a8fd..bd9e06560f 100644
--- a/packages/frontend/tests/integration/components/user-guide-link-test.js
+++ b/packages/frontend/tests/integration/components/user-guide-link-test.js
@@ -1,15 +1,30 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'frontend/tests/helpers';
-import { render } from '@ember/test-helpers';
+import { render, settled } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import { 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('.user-guide-link').exists();
-    assert.dom('.user-guide-link svg.awesome-icon.fa-circle-question').exists();
+    assert.dom('.user-guide-link svg.fa-circle-question').exists();
+    assert.dom('.user-guide-link svg.fa-circle-question title').hasText('Ilios User Guide');
+
+    this.owner.lookup('service:intl').setLocale('es');
+    await settled();
+
+    assert.dom('.user-guide-link svg.fa-circle-question title').hasText('Ilios Guía de usuario');
+
+    this.owner.lookup('service:intl').setLocale('fr');
+    await settled();
+
+    assert
+      .dom('.user-guide-link svg.fa-circle-question title')
+      .hasText("Ilios Guide d'utilisation");
   });
 });

From fccc750370b8beb9512c50d006326cd90eabd451 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Fri, 10 May 2024 16:10:31 -0700
Subject: [PATCH 06/10] made icon a little bigger and adjusted tablet-and-up
 positioning

---
 packages/frontend/app/styles/components/user-guide-link.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/frontend/app/styles/components/user-guide-link.scss b/packages/frontend/app/styles/components/user-guide-link.scss
index c2c46b532b..fa46bb752b 100644
--- a/packages/frontend/app/styles/components/user-guide-link.scss
+++ b/packages/frontend/app/styles/components/user-guide-link.scss
@@ -1,7 +1,10 @@
 @use "../ilios-common/mixins" as cm;
 @use "../ilios-common/colors" as c;
+@use "../mixins" as m;
 
 .user-guide-link {
+  @include m.header-menu;
+  margin-left: 0;
   @include cm.for-tablet-and-up {
     margin-right: 0.5rem;
   }
@@ -9,6 +12,8 @@
   a {
     svg {
       color: c.$white;
+      height: 1.5em;
+      width: 1.5em;
     }
   }
 }

From b6bacfab962afa779320a3b7ca0c6278cd726e88 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Fri, 10 May 2024 16:30:47 -0700
Subject: [PATCH 07/10] icon a bit bigger to match other buttons; improved
 sizing across viewports

---
 .../app/styles/components/ilios-header.scss        |  4 ++--
 .../app/styles/components/user-guide-link.scss     | 14 +++++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/app/styles/components/ilios-header.scss b/packages/frontend/app/styles/components/ilios-header.scss
index baefcba25f..305ca14377 100644
--- a/packages/frontend/app/styles/components/ilios-header.scss
+++ b/packages/frontend/app/styles/components/ilios-header.scss
@@ -22,8 +22,8 @@
     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 {
diff --git a/packages/frontend/app/styles/components/user-guide-link.scss b/packages/frontend/app/styles/components/user-guide-link.scss
index fa46bb752b..1ac934d9f8 100644
--- a/packages/frontend/app/styles/components/user-guide-link.scss
+++ b/packages/frontend/app/styles/components/user-guide-link.scss
@@ -4,16 +4,24 @@
 
 .user-guide-link {
   @include m.header-menu;
-  margin-left: 0;
+
   @include cm.for-tablet-and-up {
+    margin-left: 0;
     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;
-      height: 1.5em;
-      width: 1.5em;
+      display: flex;
+      height: 1.85em;
+      width: 1.85em;
     }
   }
 }

From 2894882516a9cb4a6e20b7fec70a037361819dd3 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Mon, 13 May 2024 08:53:37 -0700
Subject: [PATCH 08/10] icon left margin added so on login screen the locale
 chooser is not right on top of it

---
 packages/frontend/app/styles/components/user-guide-link.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/app/styles/components/user-guide-link.scss b/packages/frontend/app/styles/components/user-guide-link.scss
index 1ac934d9f8..3bf841d8d2 100644
--- a/packages/frontend/app/styles/components/user-guide-link.scss
+++ b/packages/frontend/app/styles/components/user-guide-link.scss
@@ -6,7 +6,7 @@
   @include m.header-menu;
 
   @include cm.for-tablet-and-up {
-    margin-left: 0;
+    margin-left: 0.25rem;
     margin-right: 0.5rem;
   }
 

From 8c4ff16e892bbd804e89c4f5e4983efbc64a92b4 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Wed, 15 May 2024 09:22:55 -0700
Subject: [PATCH 09/10] added additional data attribute to component; updated
 tests to be more like usual translation convention

---
 .../app/components/user-guide-link.hbs        | 12 ++++++++--
 .../components/user-guide-link-test.js        | 22 ++++++++-----------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/app/components/user-guide-link.hbs b/packages/frontend/app/components/user-guide-link.hbs
index 0ff7810c38..1619706946 100644
--- a/packages/frontend/app/components/user-guide-link.hbs
+++ b/packages/frontend/app/components/user-guide-link.hbs
@@ -1,5 +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"}}></FaIcon>
+  <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>
\ No newline at end of file
diff --git a/packages/frontend/tests/integration/components/user-guide-link-test.js b/packages/frontend/tests/integration/components/user-guide-link-test.js
index bd9e06560f..780d62011f 100644
--- a/packages/frontend/tests/integration/components/user-guide-link-test.js
+++ b/packages/frontend/tests/integration/components/user-guide-link-test.js
@@ -1,8 +1,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'frontend/tests/helpers';
-import { render, settled } from '@ember/test-helpers';
+import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
-import { setupIntl } from 'ember-intl/test-support';
+import { setLocale, setupIntl } from 'ember-intl/test-support';
 
 module('Integration | Component | user-guide-link', function (hooks) {
   setupRenderingTest(hooks);
@@ -11,20 +11,16 @@ module('Integration | Component | user-guide-link', function (hooks) {
   test('it renders', async function (assert) {
     await render(hbs`<UserGuideLink />`);
 
-    assert.dom('.user-guide-link').exists();
-    assert.dom('.user-guide-link svg.fa-circle-question').exists();
-    assert.dom('.user-guide-link svg.fa-circle-question title').hasText('Ilios User Guide');
+    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');
 
-    this.owner.lookup('service:intl').setLocale('es');
-    await settled();
+    await setLocale('es');
 
-    assert.dom('.user-guide-link svg.fa-circle-question title').hasText('Ilios Guía de usuario');
+    assert.dom('[data-test-user-guide-link-icon]').hasText('Ilios Guía de usuario');
 
-    this.owner.lookup('service:intl').setLocale('fr');
-    await settled();
+    await setLocale('fr');
 
-    assert
-      .dom('.user-guide-link svg.fa-circle-question title')
-      .hasText("Ilios Guide d'utilisation");
+    assert.dom('[data-test-user-guide-link-icon]').hasText("Ilios Guide d'utilisation");
   });
 });

From 2e3a0b0e937c2965bf642633687c675446204496 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Thu, 13 Jun 2024 09:27:52 -0700
Subject: [PATCH 10/10] updated icon style to not use disallowed property, and
 to use discrete pixel values

---
 .../app/styles/components/ilios-header.scss   |  1 +
 .../styles/components/user-guide-link.scss    | 21 +++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/app/styles/components/ilios-header.scss b/packages/frontend/app/styles/components/ilios-header.scss
index 305ca14377..a657673d77 100644
--- a/packages/frontend/app/styles/components/ilios-header.scss
+++ b/packages/frontend/app/styles/components/ilios-header.scss
@@ -38,6 +38,7 @@
     }
     .user-guide-link {
       grid-area: guide;
+      height: 100%;
     }
 
     .global-search-box {
diff --git a/packages/frontend/app/styles/components/user-guide-link.scss b/packages/frontend/app/styles/components/user-guide-link.scss
index 3bf841d8d2..a3493d52c2 100644
--- a/packages/frontend/app/styles/components/user-guide-link.scss
+++ b/packages/frontend/app/styles/components/user-guide-link.scss
@@ -1,27 +1,30 @@
 @use "../ilios-common/mixins" as cm;
 @use "../ilios-common/colors" as c;
-@use "../mixins" as m;
 
 .user-guide-link {
-  @include m.header-menu;
+  margin-left: 0.5rem;
 
   @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;
+      height: 30px;
+      width: 30px;
+    }
+  }
+
+  @include cm.for-phone-only {
+    a {
+      svg {
+        height: 24px;
+        width: 24px;
+      }
     }
   }
 }