@brightspace-ui/labs 2.8.0 → 2.9.0

package/src/components/navigation/navigation-immersive.js

@@ -0,0 +1,265 @@
+import '@brightspace-ui/core/components/colors/colors.js';
+import './navigation.js';
+import './navigation-link-back.js';
+import { css, html, LitElement } from 'lit';
+import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { navigationSharedStyle } from './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() {
+		return {
+			allowOverflow: {
+				attribute: 'allow-overflow',
+				type: Boolean,
+				reflect: true
+			},
+			backLinkHref: {
+				attribute: 'back-link-href',
+				type: String
+			},
+			backLinkText: {
+				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 },
+			_smallWidth: { state: true }
+		};
+	}
+
+	static get styles() {
+		return [bodyCompactStyles, navigationSharedStyle, css`
+			:host {
+				--d2l-labs-navigation-immersive-height-main: 3.1rem;
+				--d2l-labs-navigation-immersive-height-responsive: 2.8rem;
+			}
+			.d2l-navigiation-immersive-fixed {
+				background-color: white;
+				left: 0;
+				position: fixed;
+				right: 0;
+				top: 0;
+				z-index: 2; /* higher than skeletons which could scroll behind immersive nav */
+			}
+			d2l-labs-navigation {
+				border-bottom: 1px solid var(--d2l-color-mica);
+			}
+			.d2l-labs-navigation-immersive-margin {
+				display: flex;
+				justify-content: center;
+				margin: 0 30px;
+			}
+
+			.d2l-labs-navigation-immersive-container {
+				display: flex;
+				height: var(--d2l-labs-navigation-immersive-height-main);
+				justify-content: space-between;
+				margin: 0 -7px;
+				max-width: 100%;
+				overflow: hidden;
+				width: 100%;
+			}
+
+			:host([width-type="normal"]) .d2l-labs-navigation-immersive-container {
+				max-width: 1230px;
+			}
+
+			:host([allow-overflow]) .d2l-labs-navigation-immersive-container {
+				overflow: visible;
+			}
+
+			.d2l-labs-navigation-immersive-left ::slotted(*),
+			.d2l-labs-navigation-immersive-middle ::slotted(*),
+			.d2l-labs-navigation-immersive-right ::slotted(*) {
+				height: var(--d2l-labs-navigation-immersive-height-main);
+			}
+
+			.d2l-labs-navigation-immersive-left {
+				color: var(--d2l-color-tungsten);
+				letter-spacing: 0.2px;
+				padding-left: 7px;
+			}
+
+			.d2l-labs-navigation-immersive-right {
+				padding-right: 7px;
+			}
+
+			.d2l-labs-navigation-immersive-left,
+			.d2l-labs-navigation-immersive-right {
+				flex: 0 0 auto;
+			}
+
+			.d2l-labs-navigation-immersive-middle {
+				border-inline-end: 1px solid var(--d2l-color-gypsum);
+				border-inline-start: 1px solid var(--d2l-color-gypsum);
+				flex: 0 1 auto;
+				margin: 0 24px;
+				min-width: 0;
+				padding: 0 24px;
+				width: 100%;
+			}
+
+			.d2l-labs-navigation-immersive-middle.d2l-labs-navigation-immersive-middle-no-right-border {
+				border-inline-end: none;
+			}
+
+			div.d2l-labs-navigation-immersive-middle-observer,
+			div.d2l-labs-navigation-immersive-right-observer {
+				height: auto;
+			}
+
+			.d2l-labs-navigation-immersive-middle-hidden {
+				visibility: hidden;
+			}
+
+			.d2l-labs-navigation-immersive-spacing {
+				height: calc(var(--d2l-labs-navigation-immersive-height-main) + 5px);
+				position: unset;
+			}
+
+			@media (max-width: 929px) {
+				.d2l-labs-navigation-immersive-margin {
+					margin: 0 24px;
+				}
+			}
+
+			@media (max-width: 767px) {
+				.d2l-labs-navigation-immersive-margin {
+					margin: 0 18px;
+				}
+			}
+
+			@media (max-width: 615px) {
+				.d2l-labs-navigation-immersive-container {
+					height: var(--d2l-labs-navigation-immersive-height-responsive);
+				}
+				.d2l-labs-navigation-immersive-left ::slotted(*),
+				.d2l-labs-navigation-immersive-middle ::slotted(*),
+				.d2l-labs-navigation-immersive-right ::slotted(*) {
+					height: var(--d2l-labs-navigation-immersive-height-responsive);
+				}
+				.d2l-labs-navigation-immersive-spacing {
+					height: calc(var(--d2l-labs-navigation-immersive-height-responsive) + 5px);
+				}
+				.d2l-labs-navigation-immersive-middle {
+					margin: 0 18px;
+					padding: 0 18px;
+				}
+			}
+		`];
+	}
+
+	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() {
+		const middleContainerClasses = {
+			'd2l-labs-navigation-immersive-middle': true,
+			'd2l-labs-navigation-immersive-middle-hidden': this._middleHidden,
+			'd2l-labs-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-labs-navigation>
+					<div class="d2l-labs-navigation-immersive-margin">
+						<div class="d2l-labs-navigation-immersive-container">
+							<div class="d2l-labs-navigation-immersive-left d2l-body-compact">
+								<slot name="left">
+									<d2l-labs-navigation-link-back text="${backLinkText}" href="${this.backLinkHref}" @click="${this._handleBackClick}"></d2l-labs-navigation-link-back>
+								</slot>
+							</div>
+							<div class="${classMap(middleContainerClasses)}">
+								<div class="d2l-labs-navigation-immersive-middle-observer">
+									<slot name="middle"></slot>
+								</div>
+							</div>
+							<div class="d2l-labs-navigation-immersive-right"><div class="d2l-labs-navigation-immersive-right-observer"><slot name="right"></slot></div></div>
+						</div>
+					</div>
+				</d2l-labs-navigation>
+			</div>
+			<div class="d2l-labs-navigation-immersive-spacing"></div>
+		`;
+	}
+
+	_handleBackClick() {
+		this.dispatchEvent(
+			new CustomEvent(
+				'd2l-labs-navigation-immersive-back-click',
+				{ bubbles: false, composed: false }
+			)
+		);
+	}
+
+	_handlePageResize(e) {
+		this._smallWidth = e.matches;
+	}
+
+	_onMiddleResize(entries) {
+		if (!entries || entries.length === 0) {
+			return;
+		}
+		this._middleHidden = (entries[0].contentRect.height < 1);
+	}
+
+	_onRightResize(entries) {
+		if (!entries || entries.length === 0) {
+			return;
+		}
+		this._middleNoRightBorder = (entries[0].contentRect.height < 1);
+	}
+
+	_startObserving() {
+		const middle = this.shadowRoot?.querySelector('.d2l-labs-navigation-immersive-middle-observer');
+		if (middle) {
+			this._middleObserver.observe(middle);
+		}
+		const right = this.shadowRoot?.querySelector('.d2l-labs-navigation-immersive-right-observer');
+		if (right) {
+			this._rightObserver.observe(right);
+		}
+	}
+
+}
+customElements.define('d2l-labs-navigation-immersive', NavigationImmersive);

package/src/components/navigation/navigation-iterator.js

@@ -0,0 +1,97 @@
+import './navigation-button-icon.js';
+import { css, html, LitElement } from 'lit';
+import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js';
+import { LocalizeLabsElement } from '../localize-labs-element.js';
+
+class NavigationIterator extends LocalizeLabsElement(LitElement) {
+
+	static get properties() {
+		return {
+			hideText: { attribute: 'hide-text', type: Boolean },
+			previousDisabled: { attribute: 'previous-disabled', type: Boolean },
+			previousText: { attribute: 'previous-text', type: String },
+			nextDisabled: { attribute: 'next-disabled', type: Boolean },
+			nextText: { attribute: 'next-text', type: String },
+		};
+	}
+
+	static get styles() {
+		return [bodyCompactStyles, css`
+			:host {
+				align-items: center;
+				display: flex;
+				gap: 1.2rem;
+				height: 3.3rem;
+				justify-content: space-between;
+				max-width: 20rem;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this.hideText = false;
+		this.nextDisabled = false;
+		this.nextText = '';
+		this.previousDisabled = false;
+		this.previousText = '';
+	}
+
+	render() {
+		const previousText = this.previousText ? this.previousText : this.localize('components:navigation:previous');
+		const nextText = this.nextText ? this.nextText : this.localize('components:navigation:next');
+		return html`
+			<d2l-labs-navigation-button-icon
+				class="d2l-body-compact"
+				icon="tier3:chevron-left-circle"
+				icon-position="start"
+				text="${previousText}"
+				?text-hidden="${this.hideText}"
+				?disabled="${this.previousDisabled}"
+				@click="${this._dispatchPreviousClicked}"></d2l-labs-navigation-button-icon>
+			<slot class="d2l-body-compact"></slot>
+			<d2l-labs-navigation-button-icon
+				class="d2l-body-compact"
+				icon="tier3:chevron-right-circle"
+				icon-position="end"
+				text="${nextText}"
+				?text-hidden="${this.hideText}"
+				?disabled="${this.nextDisabled}"
+				@click="${this._dispatchNextClicked}"></d2l-labs-navigation-button-icon>
+		`;
+	}
+
+	_dispatchNextClicked(e) {
+		if (this.nextDisabled) {
+			return;
+		}
+
+		e.stopPropagation();
+
+		this.dispatchEvent(new CustomEvent('next-click', {
+			detail: {
+				type: e.currentTarget.type
+			}
+		}));
+	}
+
+	_dispatchPreviousClicked(e) {
+		if (this.previousDisabled) {
+			return;
+		}
+
+		e.stopPropagation();
+
+		this.dispatchEvent(new CustomEvent('previous-click', {
+			detail: {
+				type: e.currentTarget.type
+			}
+		}));
+	}
+
+}
+
+window.customElements.define('d2l-labs-navigation-iterator', NavigationIterator);

package/src/components/navigation/navigation-link-back.js

@@ -0,0 +1,39 @@
+import './navigation-link-icon.js';
+import { css, html, LitElement } from 'lit';
+import { FocusMixin } from '@brightspace-ui/core/mixins/focus-mixin.js';
+import { LocalizeLabsElement } from '../localize-labs-element.js';
+
+class NavigationLinkBack extends LocalizeLabsElement(FocusMixin(LitElement)) {
+
+	static get properties() {
+		return {
+			text: { type: String },
+			href: { type: String }
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				display: inline-block;
+				height: 100%;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+		`;
+	}
+
+	static get focusElementSelector() {
+		return 'd2l-labs-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('components:navigation:back');
+		return html`<d2l-labs-navigation-link-icon href="${href}" icon="tier1:chevron-left" text="${text}"></d2l-labs-navigation-link-icon>`;
+	}
+
+}
+
+customElements.define('d2l-labs-navigation-link-back', NavigationLinkBack);

package/src/components/navigation/navigation-link-icon.js

@@ -0,0 +1,127 @@
+import '@brightspace-ui/core/components/icons/icon.js';
+import '@brightspace-ui/core/components/tooltip/tooltip.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { highlightBorderStyles, highlightLinkStyles } from './navigation-styles.js';
+import { FocusMixin } from '@brightspace-ui/core/mixins/focus-mixin.js';
+import { getUniqueId } from '@brightspace-ui/core/helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { offscreenStyles } from '@brightspace-ui/core/components/offscreen/offscreen.js';
+
+/**
+ * Navigation link with an icon and text.
+ */
+class NavigationLinkIcon extends FocusMixin(LitElement) {
+
+	static get properties() {
+		return {
+			/**
+			 * REQUIRED: URL or URL fragment of the link
+			 * @type {string}
+			 */
+			href: { type: String },
+			/**
+			 * REQUIRED: Preset icon key (e.g. "tier1:gear")
+			 * @type {string}
+			 */
+			icon: { type: String },
+			/**
+			 * REQUIRED: Text for the link
+			 * @type {string}
+			 */
+			text: { type: String },
+			/**
+			 * Visually hides the text but still accessible
+			 * @type {boolean}
+			 */
+			textHidden: { attribute: 'text-hidden', type: Boolean },
+			/**
+			 * Offset of the tooltip
+			 * @type {Number}
+			 */
+			tooltipOffset: { attribute: 'tooltip-offset', type: Number }
+		};
+	}
+
+	static get styles() {
+		return [highlightBorderStyles, highlightLinkStyles, offscreenStyles, css`
+			:host {
+				display: inline-block;
+				height: 100%;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this.textHidden = false;
+		this._linkId = getUniqueId();
+		this._missingHrefErrorHasBeenThrown = false;
+		this._validatingHrefTimeout = null;
+	}
+
+	static get focusElementSelector() {
+		return 'a';
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		this._validateHref();
+	}
+
+	render() {
+		const { ariaLabel, id, text, tooltip } = this._getRenderSettings();
+		return html`
+			<a id="${ifDefined(id)}" href="${ifDefined(this.href)}" aria-label="${ifDefined(ariaLabel)}">
+				<span class="d2l-labs-navigation-highlight-border"></span>
+				<d2l-icon icon="${this.icon}"></d2l-icon>
+				${text}
+			</a>
+			${tooltip}
+		`;
+	}
+
+	updated(changedProperties) {
+
+		super.updated(changedProperties);
+
+		if (changedProperties.has('href')) this._validateHref();
+
+	}
+
+	_getRenderSettings() {
+		if (this.textHidden) {
+			return {
+				ariaLabel: this.text,
+				id: this._linkId,
+				text: nothing,
+				tooltip: html`<d2l-tooltip for="${this._linkId}" for-type="label" position="bottom" offset="${ifDefined(this.tooltipOffset)}" class="vdiff-target">${this.text}</d2l-tooltip>`
+			};
+		}
+		return {
+			ariaLabel: undefined,
+			id: undefined,
+			text: this.text,
+			tooltip: nothing
+		};
+	}
+
+	_validateHref() {
+		clearTimeout(this._validatingHrefTimeout);
+		// don't error immediately in case it doesn't get set immediately
+		this._validatingHrefTimeout = setTimeout(() => {
+			this._validatingHrefTimeout = null;
+			const hasHref = (typeof this.href === 'string') && this.href.length > 0;
+			if (!hasHref && !this._missingHrefErrorHasBeenThrown) {
+				this._missingHrefErrorHasBeenThrown = true;
+				// we don't want to prevent rendering
+				setTimeout(() => { throw new Error('<d2l-labs-navigation-link-icon>: missing required "href" attribute. If this component performs an action and not a navigation, consider using <d2l-labs-navigation-button-icon> instead.'); });
+			}
+		}, 3000);
+	}
+
+}
+
+customElements.define('d2l-labs-navigation-link-icon', NavigationLinkIcon);

package/src/components/navigation/navigation-link-image.js

@@ -0,0 +1,73 @@
+import '@brightspace-ui/core/components/tooltip/tooltip.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { highlightBorderStyles, highlightLinkStyles } from './navigation-styles.js';
+import { FocusMixin } from '@brightspace-ui/core/mixins/focus-mixin.js';
+import { getUniqueId } from '@brightspace-ui/core/helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+class NavigationLinkImage extends FocusMixin(LitElement) {
+
+	static get properties() {
+		return {
+			href: { type: String },
+			slim: { reflect: true, type: Boolean },
+			src: { type: String },
+			text: { type: String },
+			tooltipOffset: { attribute: 'tooltip-offset', type: Number }
+		};
+	}
+
+	static get styles() {
+		return [highlightBorderStyles, highlightLinkStyles, css`
+			:host {
+				display: inline-block;
+				height: 100%;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			img {
+				max-height: 60px;
+				max-width: 260px;
+				vertical-align: middle;
+			}
+			:host([slim]) img {
+				max-height: 40px;
+				max-width: 173px;
+			}
+			.d2l-labs-navigation-link-image-container {
+				align-items: center;
+				display: inline-flex;
+				height: 100%;
+				vertical-align: middle;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this.slim = false;
+		this.text = '';
+		this._linkId = getUniqueId();
+	}
+
+	static get focusElementSelector() {
+		return 'a';
+	}
+
+	render() {
+		const image = html`<img src="${this.src}" alt="${this.text}">`;
+		if (this.href) {
+			return html`
+				<a href="${this.href}" id="${this._linkId}">
+					<span class="d2l-labs-navigation-highlight-border"></span>
+					<span class="d2l-labs-navigation-link-image-container">${image}</span>
+				</a>
+				${this.text ? html`<d2l-tooltip for="${this._linkId}" for-type="label" position="bottom" offset="${ifDefined(this.tooltipOffset)}" class="vdiff-target">${this.text}</d2l-tooltip>` : nothing}
+			`;
+		}
+		return html`<span class="d2l-labs-navigation-link-image-container">${image}</span>`;
+	}
+}
+
+customElements.define('d2l-labs-navigation-link-image', NavigationLinkImage);

package/src/components/navigation/navigation-link.js

@@ -0,0 +1,62 @@
+import '@brightspace-ui/core/components/colors/colors.js';
+import { css, html, LitElement } from 'lit';
+import { FocusMixin } from '@brightspace-ui/core/mixins/focus-mixin.js';
+import { highlightBorderStyles } from './navigation-styles.js';
+
+class D2LNavigationLink extends FocusMixin(LitElement) {
+
+	static get properties() {
+		return {
+			href: {
+				reflect: true,
+				type: String
+			},
+			text: {
+				type: String
+			}
+		};
+	}
+
+	static get styles() {
+		return [highlightBorderStyles, css`
+			:host {
+				display: inline-block;
+				height: 100%;
+			}
+			a {
+				align-items: center;
+				color: var(--d2l-color-ferrite);
+				display: inline-flex;
+				height: 100%;
+				min-height: 40px;
+				position: relative;
+				text-decoration: none;
+				vertical-align: middle;
+			}
+			a:hover,
+			a:focus {
+				--d2l-icon-fill-color: var(--d2l-color-celestine);
+				color: var(--d2l-color-celestine);
+				outline: none;
+			}
+			:host(:not([href])) .d2l-labs-navigation-highlight-border {
+				display: none;
+			}
+		`];
+	}
+
+	static get focusElementSelector() {
+		return 'a';
+	}
+
+	render() {
+		return html`
+			<a href="${this.href}" title="${this.text}">
+				<span class="d2l-labs-navigation-highlight-border"></span>
+				<slot></slot>
+			</a>
+		`;
+	}
+}
+
+customElements.define('d2l-labs-navigation-link', D2LNavigationLink);

package/src/components/navigation/navigation-main-footer.js

@@ -0,0 +1,27 @@
+import { css, html, LitElement } from 'lit';
+import { navigationSharedStyle } from './navigation-shared-styles.js';
+
+class NavigationMainFooter extends LitElement {
+
+	static get styles() {
+		return [navigationSharedStyle, css`
+			:host {
+				border-bottom: 1px solid rgba(124, 134, 149, 0.18);
+				border-top: 1px solid rgba(124, 134, 149, 0.18);
+				display: block;
+			}
+		`];
+	}
+
+	render() {
+		return html`
+			<div class="d2l-labs-navigation-centerer">
+				<div class="d2l-labs-navigation-gutters">
+					<slot name="main"></slot>
+				</div>
+			</div>
+		`;
+	}
+
+}
+customElements.define('d2l-labs-navigation-main-footer', NavigationMainFooter);