fix: switch iterator to use button-icon (#154)

BrightspaceUILabs · Jul 11, 2022 · dacae15 · dacae15
1 parent f72b080
commit dacae15
Show file tree

Hide file tree

Showing 36 changed files with 105 additions and 347 deletions.
diff --git a/components/d2l-navigation-iterator/d2l-navigation-iterator-item.js b/components/d2l-navigation-iterator/d2l-navigation-iterator-item.js
diff --git a/components/d2l-navigation-iterator/d2l-navigation-iterator.js b/components/d2l-navigation-iterator/d2l-navigation-iterator.js
@@ -1,67 +1,63 @@
-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>
 		`;
 	}
 
@@ -95,4 +91,4 @@ class D2LNavigationIterator extends PolymerElement {
 
 }
 
-window.customElements.define('d2l-navigation-iterator', D2LNavigationIterator);
+window.customElements.define('d2l-navigation-iterator', NavigationIterator);
diff --git a/d2l-navigation-button-icon.js b/d2l-navigation-button-icon.js
@@ -24,6 +24,11 @@ class NavigationButtonIcon extends FocusMixin(LitElement) {
 			 * @type {string}
 			 */
 			icon: { type: String },
+			/**
+			 * Position of the icon.
+			 * @type {'start'|'end'}
+			 */
+			iconPosition: { attribute: 'icon-position', type: String },
 			/**
 			 * REQUIRED: Text for the button
 			 * @type {string}
@@ -52,15 +57,18 @@ class NavigationButtonIcon extends FocusMixin(LitElement) {
 				border: none;
 				color: var(--d2l-color-ferrite);
 				cursor: pointer;
+				display: inline-flex;
 				font-family: inherit;
 				font-size: inherit;
+				gap: 6px;
 				height: 100%;
 				margin: 0;
 				min-height: 40px;
 				outline: none;
 				overflow: visible;
 				padding: 0;
 				position: relative;
+				vertical-align: middle;
 				white-space: nowrap;
 			}
 			/* Firefox includes a hidden border which messes up button dimensions */
@@ -83,6 +91,7 @@ class NavigationButtonIcon extends FocusMixin(LitElement) {
 	constructor() {
 		super();
 		this.disabled = false;
+		this.iconPosition = 'start';
 		this.textHidden = false;
 		this._buttonId = getUniqueId();
 	}
@@ -94,11 +103,13 @@ class NavigationButtonIcon extends FocusMixin(LitElement) {
 	render() {
 		const { ariaLabel, id, text, tooltip } = this._getRenderSettings();
 		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>
 			${tooltip}
 		`;

diff --git a/demo/iterator.html b/demo/iterator.html
@@ -21,14 +21,7 @@ <h2>Empty</h2>
 			<h2>Count (hide text)</h2>
 			<d2l-demo-snippet>
 				<d2l-navigation-iterator hide-text>
-					<span>User 1 of 17</span>
-				</d2l-navigation-iterator>
-			</d2l-demo-snippet>
-
-			<h2>Separator (hide text)</h2>
-			<d2l-demo-snippet>
-				<d2l-navigation-iterator hide-text>
-					<d2l-navigation-separator></d2l-navigation-separator>
+					User 1 of 17
 				</d2l-navigation-iterator>
 			</d2l-demo-snippet>
 
@@ -37,14 +30,9 @@ <h2>Custom Labels</h2>
 				<d2l-navigation-iterator previous-text="Back" next-text="Forward"></d2l-navigation-iterator>
 			</d2l-demo-snippet>
 
-			<h2>Next Disabled</h2>
-			<d2l-demo-snippet>
-				<d2l-navigation-iterator next-disabled></d2l-navigation-iterator>
-			</d2l-demo-snippet>
-
-			<h2>Previous Disabled</h2>
+			<h2>Disabled</h2>
 			<d2l-demo-snippet>
-				<d2l-navigation-iterator previous-disabled></d2l-navigation-iterator>
+				<d2l-navigation-iterator previous-disabled next-disabled></d2l-navigation-iterator>
 			</d2l-demo-snippet>
 		</d2l-demo-page>
 	</body>

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "lint": "npm run lint:eslint && npm run lint:lit && npm run lint:style",
     "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}\"",
     "start": "web-dev-server --node-resolve --watch --open --app-index demo/index.html",
     "test": "npm run lint && npm run test:headless",

diff --git a/test/button.visual-diff.html b/test/button.visual-diff.html
@@ -28,6 +28,9 @@
 		<div class="visual-diff">
 			<d2l-navigation-button-icon id="icon-text-disabled" icon="tier3:classes" text="Classes" disabled></d2l-navigation-button-icon>
 		</div>
+		<div class="visual-diff">
+			<d2l-navigation-button-icon id="icon-text-flip" icon="tier3:classes" icon-position="end" text="Classes"></d2l-navigation-button-icon>
+		</div>
 		<div class="visual-diff" id="icon-text-hidden-container" style="display: inline-block; padding: 0 30px 60px 30px;">
 			<d2l-navigation-button-icon id="icon-text-hidden" icon="tier3:classes" text="Classes" text-hidden></d2l-navigation-button-icon>
 		</div>

diff --git a/test/button.visual-diff.js b/test/button.visual-diff.js
@@ -29,6 +29,7 @@ describe('d2l-navigation-button', () => {
 		{ category: 'disabled', tests: ['normal', 'hover', 'focus'] },
 		{ category: 'icon-text', tests: ['normal', 'hover', 'focus'] },
 		{ category: 'icon-text-disabled', tests: ['normal', 'hover', 'focus'] },
+		{ category: 'icon-text-flip', tests: ['normal', 'hover', 'focus'] },
 		{ category: 'icon-text-hidden', rectSelector: 'icon-text-hidden-container', tests: ['normal', 'hover', 'focus'] },
 		{ category: 'icon-text-hidden-disabled', tests: ['normal', 'hover', 'focus'] },
 		{ category: 'notification-icon-off', tests: ['normal', 'hover', 'focus'] },