diff --git a/d2l-navigation-immersive.js b/d2l-navigation-immersive.js
index bd12e93d..86cb6104 100644
--- a/d2l-navigation-immersive.js
+++ b/d2l-navigation-immersive.js
@@ -133,10 +133,6 @@ class D2LNavigationImmsersive extends DirMixin(PolymerElement) {
visibility: hidden;
}
- d2l-navigation-link-back {
- --d2l-navigation-link-back-left-padding: 12px;
- }
-
.d2l-navigation-immersive-spacing {
height: calc(var(--d2l-navigation-immersive-height-main) + 5px);
position: unset;
@@ -179,10 +175,6 @@ class D2LNavigationImmsersive extends DirMixin(PolymerElement) {
margin: 0 18px;
padding: 0 18px;
}
- d2l-navigation-link-back {
- --d2l-navigation-link-back-left-padding: 6px;
- margin: 0
- }
}
diff --git a/d2l-navigation-link-back.js b/d2l-navigation-link-back.js
index 36621231..e115adc1 100644
--- a/d2l-navigation-link-back.js
+++ b/d2l-navigation-link-back.js
@@ -1,82 +1,39 @@
-import './d2l-navigation-link.js';
-import '@brightspace-ui/core/components/icons/icon.js';
-import '@brightspace-ui/polymer-behaviors/d2l-focusable-behavior.js';
-import '@brightspace-ui/localize-behavior/d2l-localize-behavior.js';
+import './d2l-navigation-link-icon.js';
+import { css, html, LitElement } from 'lit';
+import { FocusMixin } from '@brightspace-ui/core/mixins/focus-mixin.js';
+import { LocalizeNavigationElement } from './components/localize-navigation-element.js';
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
-/**
-`d2l-navigation-link-back`
-Polymer-based web component for the back button used in the navigational header.
-
-@demo demo/d2l-navigation-button.html d2l-navigation-link-back
-*/
-class D2LNavigationLinkBack extends mixinBehaviors([D2L.PolymerBehaviors.FocusableBehavior,
- D2L.PolymerBehaviors.LocalizeBehavior], PolymerElement) {
+class NavigationLinkBack extends LocalizeNavigationElement(FocusMixin(LitElement)) {
static get properties() {
return {
- text: {
- type: String,
- value: null
- },
- href: {
- type: String
- },
- resources: {
- value: function() {
- return {
- 'ar': { 'back': 'العودة' },
- 'de': { 'back': 'Zurück' },
- 'en': { 'back': 'Back' },
- 'es': { 'back': 'Volver' },
- 'fr': { 'back': 'Précédent' },
- 'ja': { 'back': '戻る' },
- 'ko': { 'back': '뒤로' },
- 'nl': { 'back': 'Terug' },
- 'pt': { 'back': 'Voltar' },
- 'sv': { 'back': 'Tillbaka' },
- 'tr': { 'back': 'Geri' },
- 'zh': { 'back': '返回' },
- 'zh-TW': { 'back': '返回' }
- };
- }
- }
+ text: { type: String },
+ href: { type: String }
};
}
- static get template() {
- const template = html`
-
-
-
- [[_getDisplayText(text, localize)]]
-
`;
- template.setAttribute('strip-whitespace', '');
- return template;
}
- _getDisplayText(text, localize) {
- if (text === undefined || text === null) {
- return localize('back');
- }
- return text;
+ static get focusElementSelector() {
+ return 'd2l-navigation-link-icon';
}
+
+ render() {
+ const href = this.href ? this.href : 'javascript:void(0);'; // backwards-compatible for uses before missing "href" threw exception
+ const text = this.text ? this.text : this.localize('back');
+ return html``;
+ }
+
}
-customElements.define('d2l-navigation-link-back', D2LNavigationLinkBack);
+
+customElements.define('d2l-navigation-link-back', NavigationLinkBack);
diff --git a/d2l-navigation-styles.js b/d2l-navigation-styles.js
index 5fffcd22..b0f72ab2 100644
--- a/d2l-navigation-styles.js
+++ b/d2l-navigation-styles.js
@@ -30,6 +30,7 @@ export const highlightLinkStyles = css`
position: relative;
text-decoration: none;
vertical-align: middle;
+ white-space: nowrap;
}
a:hover,
a:focus {
diff --git a/lang/ar.js b/lang/ar.js
index bfcca61c..bfe43e6b 100644
--- a/lang/ar.js
+++ b/lang/ar.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "العودة",
"next": "التالي",
"previous": "السابق"
};
diff --git a/lang/cy.js b/lang/cy.js
index d93b0aa5..8c778197 100644
--- a/lang/cy.js
+++ b/lang/cy.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "Back",
"next": "Next",
"previous": "Previous"
};
diff --git a/lang/da.js b/lang/da.js
index d93b0aa5..8c778197 100644
--- a/lang/da.js
+++ b/lang/da.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "Back",
"next": "Next",
"previous": "Previous"
};
diff --git a/lang/de.js b/lang/de.js
index d93b0aa5..116f8f70 100644
--- a/lang/de.js
+++ b/lang/de.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "Zurück",
"next": "Next",
"previous": "Previous"
};
diff --git a/lang/en.js b/lang/en.js
index d93b0aa5..8c778197 100644
--- a/lang/en.js
+++ b/lang/en.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "Back",
"next": "Next",
"previous": "Previous"
};
diff --git a/lang/es-es.js b/lang/es-es.js
index 96a9c1e1..7286fc6b 100644
--- a/lang/es-es.js
+++ b/lang/es-es.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "Volver",
"next": "Siguiente",
"previous": "Anterior"
};
diff --git a/lang/es.js b/lang/es.js
index 96a9c1e1..7286fc6b 100644
--- a/lang/es.js
+++ b/lang/es.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "Volver",
"next": "Siguiente",
"previous": "Anterior"
};
diff --git a/lang/fr-fr.js b/lang/fr-fr.js
index 415e0494..8d0378b3 100644
--- a/lang/fr-fr.js
+++ b/lang/fr-fr.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "Précédent",
"next": "Suivant",
"previous": "Précédent"
};
diff --git a/lang/fr.js b/lang/fr.js
index 415e0494..8d0378b3 100644
--- a/lang/fr.js
+++ b/lang/fr.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "Précédent",
"next": "Suivant",
"previous": "Précédent"
};
diff --git a/lang/hi.js b/lang/hi.js
index d93b0aa5..8c778197 100644
--- a/lang/hi.js
+++ b/lang/hi.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "Back",
"next": "Next",
"previous": "Previous"
};
diff --git a/lang/ja.js b/lang/ja.js
index d93b0aa5..7f38df0c 100644
--- a/lang/ja.js
+++ b/lang/ja.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "戻る",
"next": "Next",
"previous": "Previous"
};
diff --git a/lang/ko.js b/lang/ko.js
index 65369c53..fc3c4938 100644
--- a/lang/ko.js
+++ b/lang/ko.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "뒤로",
"next": "다음",
"previous": "이전"
};
diff --git a/lang/nl.js b/lang/nl.js
index d93b0aa5..536c9d07 100644
--- a/lang/nl.js
+++ b/lang/nl.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "Terug",
"next": "Next",
"previous": "Previous"
};
diff --git a/lang/pt.js b/lang/pt.js
index 8fdd1b01..43515012 100644
--- a/lang/pt.js
+++ b/lang/pt.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "Voltar",
"next": "Próximo",
"previous": "Anterior"
};
diff --git a/lang/sv.js b/lang/sv.js
index a1425133..1fa44fc1 100644
--- a/lang/sv.js
+++ b/lang/sv.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "Tillbaka",
"next": "Nästa",
"previous": "Föregående"
};
diff --git a/lang/tr.js b/lang/tr.js
index 188cd16f..79ea3298 100644
--- a/lang/tr.js
+++ b/lang/tr.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "Geri",
"next": "Sonraki",
"previous": "Önceki"
};
diff --git a/lang/zh-cn.js b/lang/zh-cn.js
index 1136309c..1c4187d4 100644
--- a/lang/zh-cn.js
+++ b/lang/zh-cn.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "返回",
"next": "下一页",
"previous": "上一个"
};
diff --git a/lang/zh-tw.js b/lang/zh-tw.js
index 2dd23cee..deb3a46a 100644
--- a/lang/zh-tw.js
+++ b/lang/zh-tw.js
@@ -1,6 +1,7 @@
/* eslint quotes: 0 */
export default {
+ "back": "返回",
"next": "下一個",
"previous": "上一個"
};
diff --git a/package.json b/package.json
index dc62787b..535e152d 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
"scripts": {
"lint": "npm run lint:eslint && npm run lint:lit && npm run lint:style",
"lint:eslint": "eslint . --ext .js,.html",
- "lint:lit": "lit-analyzer d2l-navigation.js d2l-navigation-separator.js ./components/d2l-navigation-iterator/d2l-navigation-iterator.js --strict --rules.no-unknown-tag-name off",
+ "lint:lit": "lit-analyzer d2l-navigation.js d2l-navigation-button-icon.js d2l-navigation-link-back.js d2l-navigation-link-icon.js d2l-navigation-separator.js ./components/d2l-navigation-iterator/d2l-navigation-iterator.js --strict --rules.no-unknown-tag-name off",
"lint:style": "stylelint \"**/*.{js,html}\"",
"start": "web-dev-server --node-resolve --watch --open --app-index demo/index.html",
"test": "npm run lint && npm run test:headless",
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-both-slots-1500.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-both-slots-1500.png
index 2f2eb95d..c9436e15 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-both-slots-1500.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-both-slots-1500.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-both-slots-767.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-both-slots-767.png
index 2c7739d8..409683ab 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-both-slots-767.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-both-slots-767.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-both-slots-929.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-both-slots-929.png
index 45faf515..7ca4a43c 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-both-slots-929.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-both-slots-929.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-focus-back-button.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-focus-back-button.png
index ddd20985..ddcaafbd 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-focus-back-button.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-focus-back-button.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-fullscreen-1500.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-fullscreen-1500.png
index ee399d3d..c4f53606 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-fullscreen-1500.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-fullscreen-1500.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-fullscreen-767.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-fullscreen-767.png
index bbe367e7..0b1f81af 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-fullscreen-767.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-fullscreen-767.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-fullscreen-929.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-fullscreen-929.png
index 4fcf7c51..14f193ee 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-fullscreen-929.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-fullscreen-929.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-new-slots-middle.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-new-slots-middle.png
index fb259671..49316516 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-new-slots-middle.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-new-slots-middle.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-new-slots-right.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-new-slots-right.png
index 83375bce..7cd3880d 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-new-slots-right.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-new-slots-right.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-middle-slot-1500.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-middle-slot-1500.png
index 646d2c45..57c0b86e 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-middle-slot-1500.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-middle-slot-1500.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-middle-slot-767.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-middle-slot-767.png
index 1913f11f..24657deb 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-middle-slot-767.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-middle-slot-767.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-middle-slot-929.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-middle-slot-929.png
index 0d2329e5..89ea6808 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-middle-slot-929.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-middle-slot-929.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-right-slot-1500.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-right-slot-1500.png
index 2727da11..b1fdefef 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-right-slot-1500.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-right-slot-1500.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-right-slot-767.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-right-slot-767.png
index 5333274f..e3d964ab 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-right-slot-767.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-right-slot-767.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-right-slot-929.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-right-slot-929.png
index 780c9b10..24d9e1bf 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-right-slot-929.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-no-right-slot-929.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-normal-1500.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-normal-1500.png
index 7b24c068..4d8fac0f 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-normal-1500.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-normal-1500.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-normal-767.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-normal-767.png
index bbe367e7..0b1f81af 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-normal-767.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-normal-767.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-normal-929.png b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-normal-929.png
index 4fcf7c51..14f193ee 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-normal-929.png and b/test/screenshots/ci/golden/d2l-navigation-immersive/d2l-navigation-immersive-normal-929.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-back-focus.png b/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-back-focus.png
index c9f81362..8b60dd88 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-back-focus.png and b/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-back-focus.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-back-hover.png b/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-back-hover.png
index c9f81362..8b60dd88 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-back-hover.png and b/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-back-hover.png differ
diff --git a/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-back-normal.png b/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-back-normal.png
index 7b8c3e5d..157c89a3 100644
Binary files a/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-back-normal.png and b/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-back-normal.png differ