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

Comparing version 5.5.1 to 5.5.2

components/d2l-navigation-iterator/d2l-navigation-iterator.js

@@ -1,65 +0,61 @@
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import '@brightspace-ui/typography/d2l-typography-shared-styles.js';
-import './d2l-navigation-iterator-item.js';
+import { css, html, LitElement } from 'lit';
+import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js';
+import { LocalizeNavigationElement } from '../localize-navigation-element.js';
+import '../../d2l-navigation-button-icon.js';
 
-/**
- * @customElement
- * @polymer
- */
-class D2LNavigationIterator extends PolymerElement {
-	static get is() { return 'd2l-navigation-iterator'; }
+class NavigationIterator extends  LocalizeNavigationElement(LitElement) {
 
 	static get properties() {
 		return {
-			previousText: {
-				type: String
-			},
-			nextText: {
-				type: String
-			},
-			hideText: {
-				type: Boolean,
-				value: false
-			},
-			previousDisabled: {
-				type: Boolean,
-				value: false
-			},
-			nextDisabled: {
-				type: Boolean,
-				value: false
-			}
+			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 template() {
+	static get styles() {
+		return [bodyCompactStyles, css`
+			.wrapper {
+				align-items: center;
+				display: flex;
+				height: 3.3rem;
+				justify-content: space-between;
+				max-width: 20rem;
+				padding: 0 1.2rem;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this.hideText = false;
+		this.nextDisabled = false;
+		this.nextText = '';
+		this.previousDisabled = false;
+		this.previousText = '';
+	}
+
+	render() {
+		const previousText = this.previousText ? this.previousText : this.localize('previous');
+		const nextText = this.nextText ? this.nextText : this.localize('next');
 		return html`
-			<style>
-				:host {
-					@apply --d2l-body-compact-text;
-					align-items: center;
-					display: flex;
-					justify-content: space-between;
-					height: 3.3rem;
-					max-width: 20rem;
-				}
-				@media (max-width: 30.75rem) {
-					.d2l-navigation-iterator {
-						height: 3rem;
-					}
-				}
-			</style>
-			<d2l-navigation-iterator-item
-				text=[[previousText]]
-				type="previous"
-				hide-text=[[hideText]]
-				disabled=[[previousDisabled]]
-				on-click="_dispatchPreviousClicked"></d2l-navigation-iterator-item>
-			<slot></slot>
-			<d2l-navigation-iterator-item
-				text=[[nextText]]
-				type="next"
-				hide-text=[[hideText]]
-				disabled=[[nextDisabled]]
-				on-click="_dispatchNextClicked"></d2l-navigation-iterator-item>
+			<div class="wrapper d2l-body-compact">
+				<d2l-navigation-button-icon
+					icon="tier3:chevron-left-circle"
+					icon-position="start"
+					text="${previousText}"
+					?text-hidden="${this.hideText}"
+					?disabled="${this.previousDisabled}"
+					@click="${this._dispatchPreviousClicked}"></d2l-navigation-button-icon>
+				<slot></slot>
+				<d2l-navigation-button-icon
+					icon="tier3:chevron-right-circle"
+					icon-position="end"
+					text="${nextText}"
+					?text-hidden="${this.hideText}"
+					?disabled="${this.nextDisabled}"
+					@click="${this._dispatchNextClicked}"></d2l-navigation-button-icon>
+			</div>
 		`;
@@ -98,2 +94,2 @@ }
 
-window.customElements.define('d2l-navigation-iterator', D2LNavigationIterator);
+window.customElements.define('d2l-navigation-iterator', NavigationIterator);

d2l-navigation-button-icon.js

@@ -28,2 +28,7 @@ import '@brightspace-ui/core/components/colors/colors.js';
 			/**
+			 * Position of the icon.
+			 * @type {'start'|'end'}
+			 */
+			iconPosition: { attribute: 'icon-position', type: String },
+			/**
 			 * REQUIRED: Text for the button
@@ -56,4 +61,6 @@ * @type {string}
 				cursor: pointer;
+				display: inline-flex;
 				font-family: inherit;
 				font-size: inherit;
+				gap: 6px;
 				height: 100%;
@@ -66,2 +73,3 @@ margin: 0;
 				position: relative;
+				vertical-align: middle;
 				white-space: nowrap;
@@ -89,2 +97,3 @@ }
 		this.disabled = false;
+		this.iconPosition = 'start';
 		this.textHidden = false;
@@ -101,7 +110,9 @@ this._buttonId = getUniqueId();
 		const highlightBorder = !this.disabled ? html`<span class="d2l-navigation-highlight-border"></span>` : nothing;
+		const icon = html`<d2l-icon icon="${this.icon}"></d2l-icon>`;
 		return html`
 			<button id="${ifDefined(id)}" ?disabled="${this.disabled}" aria-label="${ifDefined(ariaLabel)}">
 				${highlightBorder}
-				<d2l-icon icon="${this.icon}"></d2l-icon>
+				${this.iconPosition === 'start' ? icon : nothing}
 				${text}
+				${this.iconPosition === 'end' ? icon : nothing}
 			</button>
@@ -108,0 +119,0 @@ ${tooltip}

package.json

 {
   "name": "@brightspace-ui-labs/navigation",
-  "version": "5.5.1",
+  "version": "5.5.2",
   "type": "module",
@@ -9,3 +9,3 @@ "repository": "https://github.com/BrightspaceUILabs/navigation.git",
     "lint:eslint": "eslint . --ext .js,.html",
-    "lint:lit": "lit-analyzer d2l-navigation.js d2l-navigation-separator.js ./components/d2l-navigation-iterator/d2l-navigation-iterator-item.js --strict --rules.no-unknown-tag-name off",
+    "lint:lit": "lit-analyzer d2l-navigation.js d2l-navigation-separator.js ./components/d2l-navigation-iterator/d2l-navigation-iterator.js --strict --rules.no-unknown-tag-name off",
     "lint:style": "stylelint \"**/*.{js,html}\"",
@@ -12,0 +12,0 @@ "start": "web-dev-server --node-resolve --watch --open --app-index demo/index.html",

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

Worsened metrics

Total package byte prevSize

69382

decreased by-3.09%

Number of package files

41

decreased by-2.38%

Lines of code

1485

decreased by-6.54%

No dependency changes