fix: switch back link to use link icon (#156)

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
- }
  }
 
  </style>

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`
-  <style>
+
+ static get styles() {
+ return css`
  :host {
  display: inline-block;
  height: 100%;
- white-space: nowrap;
- }
- d2l-icon {
- color: inherit;
- }
- .d2l-navigation-link-back-text {
- padding-left: var(--d2l-navigation-link-back-left-padding, 5px);
  }
- :host(:dir(rtl)) .d2l-navigation-link-back-text {
- padding-left: 0;
- padding-right: var(--d2l-navigation-link-back-left-padding, 5px);
+ :host([hidden]) {
+ display: none;
  }
- </style>
- <d2l-navigation-link href="[[href]]" class="d2l-focusable" text="[[_getDisplayText(text, localize)]]">
- <d2l-icon icon="tier1:chevron-left"></d2l-icon>
- <span class="d2l-navigation-link-back-text">[[_getDisplayText(text, localize)]]</span>
- </d2l-navigation-link>
  `;
- 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`<d2l-navigation-link-icon href="${href}" icon="tier1:chevron-left" text="${text}"></d2l-navigation-link-icon>`;
+ }
+
 }
-customElements.define('d2l-navigation-link-back', D2LNavigationLinkBack);
+
+customElements.define('d2l-navigation-link-back', NavigationLinkBack);

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 {

lang/ar.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "العودة",
  "next": "التالي",
  "previous": "السابق"
 };

lang/cy.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "Back",
  "next": "Next",
  "previous": "Previous"
 };

lang/da.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "Back",
  "next": "Next",
  "previous": "Previous"
 };

lang/de.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "Zurück",
  "next": "Next",
  "previous": "Previous"
 };

lang/en.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "Back",
  "next": "Next",
  "previous": "Previous"
 };

lang/es-es.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "Volver",
  "next": "Siguiente",
  "previous": "Anterior"
 };

lang/es.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "Volver",
  "next": "Siguiente",
  "previous": "Anterior"
 };

lang/fr-fr.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "Précédent",
  "next": "Suivant",
  "previous": "Précédent"
 };

lang/fr.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "Précédent",
  "next": "Suivant",
  "previous": "Précédent"
 };

lang/hi.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "Back",
  "next": "Next",
  "previous": "Previous"
 };

lang/ja.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "戻る",
  "next": "Next",
  "previous": "Previous"
 };

lang/ko.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "뒤로",
  "next": "다음",
  "previous": "이전"
 };

lang/nl.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "Terug",
  "next": "Next",
  "previous": "Previous"
 };

lang/pt.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "Voltar",
  "next": "Próximo",
  "previous": "Anterior"
 };

lang/sv.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "Tillbaka",
  "next": "Nästa",
  "previous": "Föregående"
 };

lang/tr.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "Geri",
  "next": "Sonraki",
  "previous": "Önceki"
 };

lang/zh-cn.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "返回",
  "next": "下一页",
  "previous": "上一个"
 };

lang/zh-tw.js

@@ -1,6 +1,7 @@
 /* eslint quotes: 0 */
 
 export default {
+ "back": "返回",
  "next": "下一個",
  "previous": "上一個"
 };

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",