@brightspace-ui/core 3.178.0 → 3.179.0

package/components/link/README.md

@@ -49,6 +49,8 @@ Import and use the `<d2l-link>` web component instead of the native `<a>` elemen
 |--|--|--|
 | `aria-label` | String | Label to provide more context for screen reader users when the link text is not enough |
 | `href` | String, required | URL or URL fragment of the link |
+| `disabled` | Boolean | Disables the link |
+| `disabled-tooltip` | String | Tooltip text when disabled |
 | `download` | String | If the attribute is provided, it will prompt the user to download the resource instead of navigating to it. Additionally, if the attribute is provided with a value, that value will be used for the filename. |
 | `main` | Boolean | Whether to apply the "main" link style |
 | `lines` | Number | The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified. |

package/components/link/demo/link.html

@@ -92,6 +92,20 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Disabled</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-link disabled href="https://www.d2l.com" target="_blank">Disabled Link</d2l-link>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Disabled with Tooltip</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-link disabled disabled-tooltip="This link is disabled because you do not have permission" href="https://www.d2l.com" target="_blank">Disabled Link with Tooltip</d2l-link>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/link/link.js

@@ -1,11 +1,13 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
+import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { getOverflowDeclarations, overflowEllipsisDeclarations } from '../../helpers/overflow.js';
 import { _generateLinkStyles } from './link-styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getFlag } from '../../helpers/flags.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
@@ -28,6 +30,16 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 			 * @type {string}
 			 */
 			ariaLabel: { type: String, attribute: 'aria-label' },
+			/**
+			 * Disables the link
+			 * @type {boolean}
+			 */
+			disabled: { type: Boolean, reflect: true },
+			/**
+			 * Tooltip text when disabled
+			 * @type {string}
+			 */
+			disabledTooltip: { type: String, attribute: 'disabled-tooltip', reflect: true },
 			/**
 			 * Download a URL instead of navigating to it
 			 * @type {boolean}
@@ -113,6 +125,24 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 					--d2l-icon-fill-color: var(--d2l-color-celestine-minus-1);
 				}
 
+				:host([disabled]:not([disabled-tooltip])) a:hover {
+					color: var(--d2l-color-celestine);
+					text-decoration: none;
+				}
+				:host([disabled]:not([disabled-tooltip])) a:hover d2l-icon {
+					--d2l-icon-fill-color: var(--d2l-color-celestine);
+				}
+				a[aria-disabled="true"],
+				a[aria-disabled="true"]:active {
+					cursor: default;
+				}
+				a[aria-disabled="true"] .d2l-link-content {
+					opacity: 0.74;
+				}
+				a[aria-disabled="true"] d2l-icon {
+					opacity: 0.64;
+				}
+
 				@media print {
 					d2l-icon {
 						display: none;
@@ -124,6 +154,7 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 
 	constructor() {
 		super();
+		this.disabled = false;
 		this.download = false;
 		this.main = false;
 		this.small = false;
@@ -141,6 +172,7 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 			'd2l-link-small': this.small
 		};
 		const spanClasses = {
+			'd2l-link-content': true,
 			'truncate': this.lines > 1,
 			'truncate-one': this.lines === 1
 		};
@@ -148,6 +180,9 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 		const newWindowElements = (this.target === '_blank')
 			? html`<span id="new-window"><span style="font-size: 0;">&nbsp;</span><d2l-icon icon="tier1:new-window"></d2l-icon></span><span class="d2l-offscreen">${this.localize('components.link.open-in-new-window')}</span>`
 			: nothing;
+		const disabledTooltip = this.disabled && this.disabledTooltip
+			? html`<d2l-tooltip class="vdiff-target" for="${this.#linkId}">${this.disabledTooltip}</d2l-tooltip>`
+			: nothing;
 
 		/*
 		* NOTICE:
@@ -155,14 +190,27 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 		* Do not modify for readability!
 		*/
 		return html`<a
+				aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
 				aria-label="${ifDefined(this.ariaLabel)}"
 				class="${classMap(linkClasses)}"
+				@click="${this.#handleClick}"
 				?download="${this.download}"
-				href="${ifDefined(this.href)}"
+				href="${ifDefined(!this.disabled ? this.href : undefined)}"
+				id="${this.#linkId}"
+				tabindex="${ifDefined(this.disabled && this.disabledTooltip ? 0 : undefined)}"
 				target="${ifDefined(this.target)}"
 				><span
 					class="${classMap(spanClasses)}"
-					style="${styleMap(styles)}"><slot></slot></span>${newWindowElements}</a>`;
+					style="${styleMap(styles)}"><slot></slot></span>${newWindowElements}</a>${disabledTooltip}`;
+	}
+
+	#linkId = getUniqueId();
+
+	#handleClick(e) {
+		if (this.disabled) {
+			e.stopPropagation();
+			e.preventDefault();
+		}
 	}
 
 }

package/custom-elements.json

@@ -8483,6 +8483,11 @@
           "description": "ACCESSIBILITY: Label to provide more context for screen reader users when the link text is not enough",
           "type": "string"
         },
+        {
+          "name": "disabled-tooltip",
+          "description": "Tooltip text when disabled",
+          "type": "string"
+        },
         {
           "name": "href",
           "description": "REQUIRED: URL or URL fragment of the link",
@@ -8493,6 +8498,12 @@
           "description": "Where to display the linked URL",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "description": "Disables the link",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "download",
           "description": "Download a URL instead of navigating to it",
@@ -8525,6 +8536,12 @@
           "description": "ACCESSIBILITY: Label to provide more context for screen reader users when the link text is not enough",
           "type": "string"
         },
+        {
+          "name": "disabledTooltip",
+          "attribute": "disabled-tooltip",
+          "description": "Tooltip text when disabled",
+          "type": "string"
+        },
         {
           "name": "href",
           "attribute": "href",
@@ -8537,6 +8554,13 @@
           "description": "Where to display the linked URL",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the link",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "download",
           "attribute": "download",

package/helpers/interactive.js

@@ -35,7 +35,7 @@ export function isInteractive(ele, elems, roles) {
 		return true;
 	}
 	const role = (ele.getAttribute('role') || '');
-	return (nodeName === 'a' && ele.hasAttribute('href')) || roles[role] || false;
+	return (nodeName === 'a' && (ele.hasAttribute('href') || ele.getAttribute('tabindex') === '0')) || roles[role] || false;
 }
 
 export function isInteractiveInComposedPath(composedPath, predicate, options) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.178.0",
+  "version": "3.179.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",