@brightspace-ui-labs/navigation - npm Package Compare versions

Comparing version 5.4.0 to 5.5.0

d2l-navigation-link-icon.js

 import '@brightspace-ui/core/components/icons/icon.js';
-import { html, LitElement } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
+import '@brightspace-ui/core/components/tooltip/tooltip.js';
+import { html, LitElement, nothing } from 'lit';
 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';
@@ -27,3 +28,3 @@ import { offscreenStyles } from '@brightspace-ui/core/components/offscreen/offscreen.js';
 			/**
-			 * REQUIRED: Accessible text for the button
+			 * REQUIRED: Text for the link
 			 * @type {string}
@@ -47,2 +48,3 @@ */
 		this.textHidden = false;
+		this._linkId = getUniqueId();
 		this._missingHrefErrorHasBeenThrown = false;
@@ -62,11 +64,10 @@ this._validatingHrefTimeout = null;
 	render() {
-		const textClasses = {
-			'd2l-offscreen': this.textHidden
-		};
+		const { ariaLabel, id, text, tooltip } = this._getRenderSettings();
 		return html`
-			<a href="${ifDefined(this.href)}" title="${ifDefined(this.textHidden ? this.text : undefined)}">
+			<a id="${ifDefined(id)}" href="${ifDefined(this.href)}" aria-label="${ifDefined(ariaLabel)}">
 				<span class="d2l-navigation-highlight-border"></span>
 				<d2l-icon icon="${this.icon}"></d2l-icon>
-				<span class="${classMap(textClasses)}">${this.text}</span>
+				${text}
 			</a>
+			${tooltip}
 		`;
@@ -83,2 +84,19 @@ }
 
+	_getRenderSettings() {
+		if (this.textHidden) {
+			return {
+				ariaLabel: this.text,
+				id: this._linkId,
+				text: nothing,
+				tooltip: html`<d2l-tooltip for="${this._linkId}" for-type="label">${this.text}</d2l-tooltip>`
+			};
+		}
+		return {
+			ariaLabel: undefined,
+			id: undefined,
+			text: this.text,
+			tooltip: nothing
+		};
+	}
+
 	_validateHref() {
@@ -85,0 +103,0 @@ clearTimeout(this._validatingHrefTimeout);

package.json

 {
   "name": "@brightspace-ui-labs/navigation",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "type": "module",
@@ -21,2 +21,3 @@ "repository": "https://github.com/BrightspaceUILabs/navigation.git",
     "d2l-navigation-button-close.js",
+    "d2l-navigation-button-icon.js",
     "d2l-navigation-button-notification-icon.js",
@@ -23,0 +24,0 @@ "d2l-navigation-button.js",

README.md

@@ -154,2 +154,17 @@ # navigation
 
+### d2l-navigation-button-icon
+
+`<d2l-navigation-button-icon>` provides a button with an icon and optional text.
+
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `disabled` | Boolean | Disables the button |
+| `text` | String, required | Text for the button |
+| `icon` | String | Preset icon key (e.g. `tier1:gear`) |
+| `text-hidden` | Boolean | Visually hides the text |
+
+---
+
 ### d2l-navigation-link-icon
@@ -257,7 +272,7 @@
 # run visual-diff tests
-npx mocha './test/**/*.visual-diff.mjs' -t 10000
+npx mocha './test/**/*.visual-diff.js' -t 10000
 # subset of visual-diff tests:
-npx mocha './test/**/*.visual-diff.mjs' -t 10000 -g some-pattern
+npx mocha './test/**/*.visual-diff.js' -t 10000 -g some-pattern
 # update visual-diff goldens
-npx mocha './test/**/*.visual-diff.mjs' -t 10000 --golden
+npx mocha './test/**/*.visual-diff.js' -t 10000 --golden
 ```
@@ -264,0 +279,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

74160

increased by5.56%

Number of package files

43

increased by2.38%

Lines of code

1658

increased by8.79%

Number of lines in readme file

324

increased by4.85%

No dependency changes