fix: finish conversion to lit 3

BrightspaceUILabs · Jan 15, 2025 · f81ec93 · f81ec93
2 parents 3d5ca18 + 5aa46d5
commit f81ec93
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 106 deletions.
diff --git a/d2l-navigation-highlight-styles.js b/d2l-navigation-highlight-styles.js
diff --git a/d2l-navigation-link.js b/d2l-navigation-link.js
@@ -1,68 +1,61 @@
-import '@brightspace-ui/polymer-behaviors/d2l-focusable-behavior.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { highlightStyles } from './d2l-navigation-highlight-styles.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
-/**
-`d2l-navigation-link`
-Polymer-based web component for buttons used in the navigational header.
+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 './d2l-navigation-styles.js';
 
-@demo demo/d2l-navigation-button.html d2l-navigation-link
-*/
-class D2LNavigationLink extends mixinBehaviors([D2L.PolymerBehaviors.FocusableBehavior], PolymerElement) {
+class D2LNavigationLink extends FocusMixin(LitElement) {
 
 	static get properties() {
 		return {
 			href: {
-				reflectToAttribute: true,
+				reflect: true,
 				type: String
 			},
 			text: {
 				type: String
 			}
 		};
 	}
-	static get template() {
-		const template = html`
-			${highlightStyles}
-			<style is="custom-style">
-				: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 {
-					color: var(--d2l-color-celestine);
-					--d2l-icon-fill-color: var(--d2l-color-celestine);
-					outline: none;
-				}
-				a:hover .d2l-navigation-link-top-border,
-				a:focus .d2l-navigation-link-top-border {
-					@apply --d2l-navigation-highlight-border-hover-focus;
-				}
-				.d2l-navigation-link-top-border {
-					@apply --d2l-navigation-highlight-border;
-				}
-				:host(:not([href])) .d2l-navigation-link-top-border {
-					display: none;
-				}
-			</style>
-			<a class="d2l-focusable" href$="[[href]]" title$="[[text]]">
-				<span class="d2l-navigation-link-top-border"></span>
+
+	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-navigation-highlight-border {
+				display: none;
+			}
+		`];
+	}
+
+	static get focusElementSelector() {
+		return 'a';
+	}
+
+	render() {
+		return html`
+			<a href="${this.href}" title="${this.text}">
+				<span class="d2l-navigation-highlight-border"></span>
 				<slot></slot>
 			</a>
 		`;
-		template.setAttribute('strip-whitespace', '');
-		return template;
 	}
 }
 

diff --git a/package.json b/package.json
@@ -19,7 +19,6 @@
     "d2l-navigation-button-icon.js",
     "d2l-navigation-dropdown-button-custom.js",
     "d2l-navigation-dropdown-button-icon.js",
-    "d2l-navigation-highlight-styles.js",
     "d2l-navigation-immersive.js",
     "d2l-navigation-link-back.js",
     "d2l-navigation-link-icon.js",
@@ -52,10 +51,7 @@
   "dependencies": {
     "@brightspace-ui/core": "^3",
     "@brightspace-ui/localize-behavior": "^2",
-    "@brightspace-ui/polymer-behaviors": "^4",
     "@brightspace-ui/typography": "^9",
-    "@polymer/polymer": "^3",
-    "fastdom": "^1",
     "lit": "^3",
     "resize-observer-polyfill": "^1"
   }