Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add icon to header to link to User Guide #7821

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/frontend/app/components/ilios-header.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,6 @@
{{#if this.session.isAuthenticated}}
<UserMenu />
{{/if}}
<UserGuideLink />
</div>
</header>
13 changes: 13 additions & 0 deletions packages/frontend/app/components/user-guide-link.hbs
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion packages/frontend/app/components/user-menu.hbs
Original file line number Diff line number Diff line change
@@ -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 }}
Expand Down
1 change: 1 addition & 0 deletions packages/frontend/app/styles/components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
10 changes: 7 additions & 3 deletions packages/frontend/app/styles/components/ilios-header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -36,6 +36,10 @@
.user-menu {
grid-area: user;
}
.user-guide-link {
grid-area: guide;
height: 100%;
}

.global-search-box {
grid-area: search;
Expand Down
30 changes: 30 additions & 0 deletions packages/frontend/app/styles/components/user-guide-link.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
@use "../ilios-common/mixins" as cm;
@use "../ilios-common/colors" as c;

.user-guide-link {
margin-left: 0.5rem;

@include cm.for-tablet-and-up {
margin-left: 0.25rem;
margin-right: 0.5rem;
}

a {
svg {
align-items: center;
color: c.$white;
display: flex;
height: 30px;
width: 30px;
}
}

@include cm.for-phone-only {
a {
svg {
height: 24px;
width: 24px;
}
}
}
}
Original file line number Diff line number Diff line change
@@ -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");
});
});
2 changes: 2 additions & 0 deletions packages/ilios-common/addon/components/fa-icon.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
1 change: 1 addition & 0 deletions packages/ilios-common/translations/en-us.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions packages/ilios-common/translations/es.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions packages/ilios-common/translations/fr.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down