feat: add "back-link-text-short" attribute (#219)

README.md

@@ -77,6 +77,7 @@ Optionally:
 
 - The max-width can be configured to match the max-width used by the LE by setting `widthType` to `normal`
 - Overflow can be enabled to facilitate components like dropdowns by including the `allow-overflow` boolean attribute
+- A shorter version of the back text can be provided by setting the `back-link-text-short` attribute
 
 ## Secondary Components
 

d2l-navigation-immersive.js

@@ -7,6 +7,8 @@ import { classMap } from 'lit/directives/class-map.js';
 import { navigationSharedStyle } from './d2l-navigation-shared-styles.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 
+const mediaQueryList = window.matchMedia('(max-width: 615px)');
+
 class NavigationImmersive extends LitElement {
 
 	static get properties() {
@@ -24,13 +26,18 @@ class NavigationImmersive extends LitElement {
 				attribute: 'back-link-text',
 				type: String
 			},
+			backLinkTextShort: {
+				attribute: 'back-link-text-short',
+				type: String
+			},
 			widthType: {
 				attribute: 'width-type',
 				type: String,
 				reflect: true
 			},
 			_middleHidden: { state: true },
-			_middleNoRightBorder: { state: true }
+			_middleNoRightBorder: { state: true },
+			_smallWidth: { state: true }
 		};
 	}
 
@@ -158,26 +165,31 @@ class NavigationImmersive extends LitElement {
 
 	constructor() {
 		super();
+		this._handlePageResize = this._handlePageResize.bind(this);
 		this._middleHidden = false;
 		this._middleNoRightBorder = true;
 		this._middleObserver = new ResizeObserver(this._onMiddleResize.bind(this));
 		this._rightObserver = new ResizeObserver(this._onRightResize.bind(this));
+		this._smallWidth = false;
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
 		this._startObserving();
+		if (mediaQueryList.addEventListener) mediaQueryList.addEventListener('change', this._handlePageResize);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this._middleObserver) this._middleObserver.disconnect();
 		if (this._rightObserver) this._rightObserver.disconnect();
+		if (mediaQueryList.removeEventListener) mediaQueryList.removeEventListener('change', this._handlePageResize);
 	}
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		this._startObserving();
+		this._smallWidth = mediaQueryList.matches;
 	}
 
 	render() {
@@ -186,14 +198,15 @@ class NavigationImmersive extends LitElement {
 			'd2l-navigation-immersive-middle-hidden': this._middleHidden,
 			'd2l-navigation-immersive-middle-no-right-border': this._middleNoRightBorder
 		};
+		const backLinkText = this._smallWidth ? (this.backLinkTextShort || this.backLinkText) : this.backLinkText;
 		return html`
 			<div class="d2l-navigiation-immersive-fixed">
 				<d2l-navigation>
 					<div class="d2l-navigation-immersive-margin">
 						<div class="d2l-navigation-immersive-container">
 							<div class="d2l-navigation-immersive-left d2l-body-compact">
 								<slot name="left">
-									<d2l-navigation-link-back text="${this.backLinkText}" href="${this.backLinkHref}"></d2l-navigation-link-back>
+									<d2l-navigation-link-back text="${backLinkText}" href="${this.backLinkHref}"></d2l-navigation-link-back>
 								</slot>
 							</div>
 							<div class="${classMap(middleContainerClasses)}">
@@ -210,6 +223,10 @@ class NavigationImmersive extends LitElement {
 		`;
 	}
 
+	_handlePageResize(e) {
+		this._smallWidth = e.matches;
+	}
+
 	_onMiddleResize(entries) {
 		if (!entries || entries.length === 0) {
 			return;

test/immersive.vdiff.js

@@ -6,6 +6,7 @@ const normalFixture = html`<d2l-navigation-immersive width-type="normal" back-li
 const noRightSlotFixture = html`<d2l-navigation-immersive><div slot="middle">Middle</div></d2l-navigation-immersive>${pageContent}`;
 const noMiddleSlotFixture = html`<d2l-navigation-immersive><div slot="right">Right</div></d2l-navigation-immersive>${pageContent}`;
 const allowOverflowFixture = html`<d2l-navigation-immersive allow-overflow><div slot="right" style="background-color: red; height: 200px;">Should overflow</div></d2l-navigation-immersive>${pageContent}`;
+const backLinkTextFixture = html`<d2l-navigation-immersive back-link-text="Long Text" back-link-text-short="Short Text"></d2l-navigation-immersive>`;
 
 describe('d2l-navigation-immersive', () => {
 
@@ -52,4 +53,22 @@ describe('d2l-navigation-immersive', () => {
 		});
 	});
 
+	describe('back-text', () => {
+		it('short', async() => {
+			await fixture(backLinkTextFixture, { viewport: { height: 200, width: 500 } });
+			await expect(document).to.be.golden();
+		});
+		it('long', async() => {
+			await fixture(backLinkTextFixture, { viewport: { height: 200, width: 650 } });
+			await expect(document).to.be.golden();
+		});
+		it('short-not-set', async() => {
+			await fixture(
+				html`<d2l-navigation-immersive back-link-text="Long Text"></d2l-navigation-immersive>`,
+				{ viewport: { height: 200, width: 500 } }
+			);
+			await expect(document).to.be.golden();
+		});
+	});
+
 });