@brightspace-ui/labs 1.2.3 → 1.3.0

package/package.json

@@ -4,11 +4,15 @@
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/labs.git",
   "exports": {
+    "./components/community-button.js": "./src/components/community/community-button.js",
+    "./components/community-link.js": "./src/components/community/community-link.js",
+    "./components/community-url-factory.js": "./src/components/community/community-url-factory.js",
     "./components/opt-in-flyout.js": "./src/components/opt-in-flyout/opt-in-flyout.js",
     "./components/opt-out-flyout.js": "./src/components/opt-in-flyout/opt-out-flyout.js",
     "./components/opt-out-reason.js": "./src/components/opt-in-flyout/opt-out-reason.js",
     "./controllers/computed-value.js": "./src/controllers/computed-values/computed-value.js",
-    "./controllers/computed-values.js": "./src/controllers/computed-values/computed-values.js"
+    "./controllers/computed-values.js": "./src/controllers/computed-values/computed-values.js",
+    "./controllers/language-listener.js": "./src/controllers/language-listener/language-listener.js"
   },
   "scripts": {
     "lint": "npm run lint:eslint && npm run lint:style",
@@ -17,13 +21,14 @@
     "start": "web-dev-server --node-resolve --open --watch",
     "test": "npm run lint && npm run test:translations && npm run test:unit",
     "test:translations": "mfv -e -s en -p ./lang/ -i untranslated",
-    "test:unit": "d2l-test-runner"
+    "test:unit": "d2l-test-runner",
+    "test:vdiff": "d2l-test-runner vdiff"
   },
   "author": "D2L Corporation",
   "license": "Apache-2.0",
   "devDependencies": {
     "@brightspace-ui/stylelint-config": "^0.8",
-    "@brightspace-ui/testing": "^0.28",
+    "@brightspace-ui/testing": "^0.34",
     "@web/dev-server": "^0.3",
     "eslint": "^8",
     "eslint-config-brightspace": "^0.25",
@@ -41,5 +46,5 @@
     "@brightspace-ui/core": "^2",
     "lit": "^2"
   },
-  "version": "1.2.3"
+  "version": "1.3.0"
 }

package/src/components/community/community-base.js

@@ -0,0 +1,27 @@
+import { communityUrlFactory } from './community-url-factory.js';
+import { LanguageListenerController } from '../../controllers/language-listener/language-listener.js';
+
+export const CommunityBase = (superClass) => class CommunityBaseMixin extends superClass {
+
+	static get properties() {
+		return {
+			articleMap: { attribute: 'article-map', type: Object }
+		};
+	}
+
+	constructor() {
+		super();
+		this.langController = new LanguageListenerController(this);
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.communityArticleDirective = communityUrlFactory(this.articleMap);
+	}
+
+	updated(changedProperties) {
+		if (changedProperties.has('articleMap')) {
+			this.communityArticleDirective = communityUrlFactory(this.articleMap);
+		}
+	}
+};

package/src/components/community/community-button.js

@@ -0,0 +1,27 @@
+import '@brightspace-ui/core/components/button/button-subtle.js';
+import { html, LitElement } from 'lit';
+import { CommunityBase } from './community-base.js';
+
+class CommunityLink extends CommunityBase(LitElement) {
+
+	static get properties() {
+		return {
+			text: { type: String },
+		};
+	}
+
+	render() {
+		return html`<d2l-button-subtle
+			icon="d2l-tier1:help"
+			text=${this.text}
+			@click="${this._handleButtonClick}"
+		></d2l-button-subtle>`;
+	}
+
+	_handleButtonClick() {
+		const link = this.communityArticleDirective(this.langController.language);
+		window.open(link, '_blank');
+	}
+}
+
+customElements.define('d2l-labs-community-button', CommunityLink);

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

@@ -0,0 +1,19 @@
+import './link-temp.js';
+import { html, LitElement } from 'lit';
+import { CommunityBase } from './community-base.js';
+
+class CommunityLink extends CommunityBase(LitElement) {
+
+	static get properties() {
+		return {
+			text: { type: String },
+			small: { type: Boolean }
+		};
+	}
+
+	render() {
+		return html`<d2l-labs-link-temp new-window href="${this.communityArticleDirective(this.langController.language)}" ?small=${this.small} >${this.text}</d2l-labs-link-temp>`;
+	}
+}
+
+customElements.define('d2l-labs-community-link', CommunityLink);

package/src/components/community/community-url-factory.js

@@ -0,0 +1,23 @@
+
+export const communityUrlFactory = (articleMap) => (langIdent) => {
+	langIdent = langIdent.toLocaleLowerCase();
+	let articleCode = articleMap[langIdent];
+	let usedLangCode = articleCode !== undefined ? langIdent : undefined;
+	if (articleCode === undefined) {
+		// try and get a region-less match
+		const regionlessLangIdent = langIdent.split('-')[0];
+		Object.entries(articleMap).forEach(([langCode, currentArticle]) => {
+			const regionlessLangCode = langCode.split('-')[0];
+			if (regionlessLangIdent === regionlessLangCode) {
+				articleCode = currentArticle;
+				usedLangCode = langCode;
+			}
+		});
+		// still undefined? use en
+		if (articleCode === undefined) {
+			articleCode = articleMap['en'];
+			usedLangCode = 'en';
+		}
+	}
+	return `https://community.d2l.com/brightspace${usedLangCode === 'en' ? '' : `-${usedLangCode}`}/kb/articles/${articleCode}`;
+};

package/src/components/community/link-temp.js

@@ -0,0 +1,192 @@
+// Delete this file once core#4001 is merged.
+// https://github.com/BrightspaceUI/core/pull/4001
+import '@brightspace-ui/core/components/colors/colors';
+import '@brightspace-ui/core/components/icons/icon.js';
+import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { FocusMixin } from '@brightspace-ui/core/mixins/focus/focus-mixin.js';
+import { getFocusPseudoClass } from '@brightspace-ui/core/helpers/focus.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LocalizeCoreElement } from '@brightspace-ui/core/helpers/localize-core-element.js';
+import { offscreenStyles } from '@brightspace-ui/core/components/offscreen/offscreen.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+export const linkStyles = css`
+	.d2l-link, .d2l-link:visited, .d2l-link:active, .d2l-link:link {
+		color: var(--d2l-color-celestine);
+		cursor: pointer;
+		outline-style: none;
+		text-decoration: none;
+	}
+	:host([skeleton]) .d2l-link.d2l-skeletize::before {
+		bottom: 0.2rem;
+		top: 0.2rem;
+	}
+	.d2l-link:hover {
+		color: var(--d2l-color-celestine-minus-1);
+		text-decoration: underline;
+	}
+	.d2l-link:${unsafeCSS(getFocusPseudoClass())} {
+		border-radius: 2px;
+		outline: 2px solid var(--d2l-color-celestine);
+		outline-offset: 1px;
+		text-decoration: underline;
+	}
+	.d2l-link.d2l-link-main {
+		font-weight: 700;
+	}
+	.d2l-link.d2l-link-small {
+		font-size: 0.7rem;
+		letter-spacing: 0.01rem;
+		line-height: 1.05rem;
+	}
+	:host([skeleton]) .d2l-link.d2l-link-small.d2l-skeletize::before {
+		bottom: 0.15rem;
+		top: 0.15rem;
+	}
+	@media print {
+		.d2l-link, .d2l-link:visited, .d2l-link:active, .d2l-link:link {
+			color: var(--d2l-color-ferrite);
+		}
+	}
+`;
+
+/**
+ * This component can be used just like the native anchor tag.
+ * @slot - The content (e.g., text) that when selected causes navigation
+ */
+class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
+
+	static get properties() {
+		return {
+			/**
+			 * Sets an accessible label
+			 * @type {string}
+			 */
+			ariaLabel: { type: String, attribute: 'aria-label' },
+			/**
+			 * Download a URL instead of navigating to it
+			 * @type {boolean}
+			 */
+			download: { type: Boolean },
+			/**
+			 * REQUIRED: URL or URL fragment of the link
+			 * @type {string}
+			 */
+			href: { type: String },
+			/**
+			 * Whether to apply the "main" link style
+			 * @type {boolean}
+			 */
+			main: { type: Boolean, reflect: true },
+			/**
+			 * The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified.
+			 * @type {number}
+			 */
+			lines: { type: Number },
+			/**
+			 * Whether to apply the "small" link style
+			 * @type {boolean}
+			 */
+			small: { type: Boolean, reflect: true },
+			/**
+			 * Where to display the linked URL
+			 * @type {string}
+			 */
+			target: { type: String },
+			/**
+			 * Whether to display the open in new window icon
+			 * @type {boolean}
+			 */
+			newWindow: { type: Boolean, attribute: 'new-window' }
+		};
+	}
+
+	static get styles() {
+		return [ linkStyles, offscreenStyles,
+			css`
+				:host {
+					display: inline;
+				}
+				:host([hidden]) {
+					display: none;
+				}
+				:host([small]) {
+					/* needed to keep host element same height as link */
+					font-size: 0.7rem;
+					line-height: 1.05rem;
+				}
+				a {
+					display: inherit;
+				}
+				a.truncate {
+					-webkit-box-orient: vertical;
+					display: -webkit-box;
+					overflow: hidden;
+					overflow-wrap: anywhere;
+				}
+				d2l-icon.d2l-new-window {
+					color: var(--d2l-color-celestine);
+					vertical-align: inherit;
+				}
+
+				:host([small]) d2l-icon.d2l-new-window {
+					height: 14px;
+					width: 14px;
+				}
+
+				@media print {
+					d2l-icon.d2l-new-window {
+						display: none;
+					}
+				}
+			`
+		];
+	}
+
+	constructor() {
+		super();
+		this.download = false;
+		this.main = false;
+		this.small = false;
+		this.lines = 0;
+		this.newWindow = false;
+	}
+
+	static get focusElementSelector() {
+		return '.d2l-link';
+	}
+
+	render() {
+		const linkClasses = {
+			'd2l-link': true,
+			'd2l-link-main': this.main,
+			'd2l-link-small': this.small,
+			'truncate': this.lines > 0
+		};
+		const styles = (this.lines > 0) ? { '-webkit-line-clamp': this.lines } : {};
+		const target = this.newWindow && this.target === undefined
+			? '_blank'
+			: this.target;
+		/* eslint-disable indent */
+		return html`
+			<a
+				aria-label="${ifDefined(this.ariaLabel)}"
+				class="${classMap(linkClasses)}"
+				style="${styleMap(styles)}"
+				?download="${this.download}"
+				href="${ifDefined(this.href)}"
+				target="${ifDefined(target)}"
+			>
+				<span style="white-space: nowrap;">
+					<span style="white-space: normal;"><slot></slot></span>${this.newWindow ? html`&nbsp;<d2l-icon class="d2l-new-window" icon="tier1:new-window"></d2l-icon>`
+					: nothing}
+					${target === '_blank' ? html`<span class="d2l-offscreen">${this.localize('components.link.open-in-new-window')}</span>`
+					: nothing}
+				</span>
+			</a>`;
+	}
+	/* eslint-enable indent */
+
+}
+customElements.define('d2l-labs-link-temp', Link);

package/src/components/opt-in-flyout/flyout-impl.js

@@ -375,7 +375,7 @@ class FlyoutImplementation extends composeMixins(
 					${this._renderLinksText()}
 				</div>
 				<div class="flyout-buttons">
-					<d2l-button id="primary-button" primary="" @click="${this._clickOptIn}">${this._getPrimaryButtonText()}</d2l-button>
+					<d2l-button id="primary-button" primary @click="${this._clickOptIn}">${this._getPrimaryButtonText()}</d2l-button>
 					<d2l-button id="opt-out-button" @click="${this._clickOptOut}">${this._getSecondaryButtonText()}</d2l-button>
 				</div>
 			</div>

package/src/components/opt-in-flyout/opt-out-dialog.js

@@ -114,8 +114,7 @@ class OptOutDialog extends composeMixins(
 				<label id="title-label">${this.localize('components:optInFlyout:feedbackTitle')}</label>
 				<br><br>
 				<div ?hidden="${this.hideReason}">
-					<label id="reason-label">${this.localize('components:optInFlyout:feedbackReasonLabel')}</label>
-					<d2l-labs-opt-out-reason-selector id="reason-selector" aria-labelledby="reason-label" @selected="${this._handleSelected}">
+					<d2l-labs-opt-out-reason-selector id="reason-selector" @selected="${this._handleSelected}">
 						<slot></slot>
 					</d2l-labs-opt-out-reason-selector>
 				</div>

package/src/components/opt-in-flyout/opt-out-reason-selector.js

@@ -20,6 +20,11 @@ class OptOutReasonSelector extends composeMixins(
 		return [
 			inputStyles,
 			css`
+				label {
+					display: block;
+					margin-bottom: 0.5rem;
+				}
+
 				select {
 					-moz-appearance: none;
 					-webkit-appearance: none;
@@ -68,6 +73,7 @@ class OptOutReasonSelector extends composeMixins(
 
 	render() {
 		return html`
+			<label for="selector">${this.localize('components:optInFlyout:feedbackReasonLabel')}</label>
 			<select class="d2l-input" id="selector" @change="${this._reasonSelected}" onload="${this.focus()}">
 				<option disabled="" value="">${this.localize('components:optInFlyout:feedbackChooseReason')}</option>
 				${this._reasons.map((item) => html`<option value="${item.key}">${item.text}</option>`)}

package/src/controllers/language-listener/language-listener.js

@@ -0,0 +1,23 @@
+import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
+
+const localeSettings = getDocumentLocaleSettings();
+
+export class LanguageListenerController {
+
+	constructor(host) {
+		(this.host = host).addController(this);
+		this._handleLangUpdate = () => {
+			this.language = localeSettings.language;
+			this.host.requestUpdate();
+		};
+		this.language = localeSettings.language;
+	}
+
+	hostConnected() {
+		localeSettings.addChangeListener(this._handleLangUpdate);
+	}
+
+	hostDisconnected() {
+		localeSettings.removeChangeListener(this._handleLangUpdate);
+	}
+}