feat: Migrate Wizard component

BrightspaceUI · Dec 24, 2024 · b289e05 · b289e05
2 parents 504fb61 + 2e9deb2
commit b289e05
Show file tree

Hide file tree

Showing 34 changed files with 860 additions and 21 deletions.
diff --git a/demo/components/wizard/index.html b/demo/components/wizard/index.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+	<script type="module">
+		import '@brightspace-ui/core/components/demo/demo-page.js';
+		import '../../../src/components/wizard/wizard.js';
+		import '../../../src/components/wizard/step.js';
+	</script>
+</head>
+
+<body unresolved>
+	<d2l-demo-page page-title="d2l-labs-wizard">
+		<h2>Basic Wizard</h2>
+		<d2l-demo-snippet>
+			<d2l-labs-wizard id="wizard" selected-step="1">
+				<d2l-labs-wizard-step next-button-aria-label="Go to step 2" step-title="Lets get started" hide-restart-button="true">
+					<p> first step </p>
+				</d2l-labs-wizard-step>
+
+				<d2l-labs-wizard-step aria-title="This is the second step" restart-button-tooltip="Restart this wizard">
+					<p> second step </p>
+				</d2l-labs-wizard-step>
+
+				<d2l-labs-wizard-step step-title="Almost done" next-button-title="Done" next-button-tooltip="Save this wizard">
+					<p> Last step </p>
+				</d2l-labs-wizard-step>
+			</d2l-labs-wizard>
+			<script>
+				const wizard = document.getElementById('wizard');
+				wizard.addEventListener('stepper-next', () => {
+					wizard.next();
+				});
+				wizard.addEventListener('stepper-restart', () => {
+					wizard.restart();
+				});
+			</script>
+		</d2l-demo-snippet>
+		<d2l-demo-snippet>
+			<d2l-labs-wizard id="wizard2" selected-step="0">
+				<d2l-labs-wizard-step step-title="Lets get started" hide-restart-button="true" hide-next-button="true">
+					<p> first step </p>
+				</d2l-labs-wizard-step>
+				<d2l-labs-wizard-step step-title="Last done" hide-restart-button="true" hide-next-button="true">
+					<p> Last step </p>
+				</d2l-labs-wizard-step>
+			</d2l-labs-wizard>
+		</d2l-demo-snippet>
+	</d2l-demo-page>
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -28,6 +28,7 @@ <h2 class="d2l-heading-2">Components</h2>
 			<li><a href="demo/components/opt-in-flyout/index.html">Opt-In Flyout</a></li>
 			<li><a href="demo/components/pagination/index.html">Pagination</a></li>
 			<li><a href="demo/components/view-toggle/index.html">View Toggle</a></li>
+			<li><a href="demo/components/wizard/index.html">Wizard</a></li>
 		</ul>
 
 		<h2 class="d2l-heading-3">Controllers</h2>

diff --git a/package.json b/package.json
@@ -15,6 +15,8 @@
     "./components/opt-out-reason.js": "./src/components/opt-in-flyout/opt-out-reason.js",
     "./components/pager-numeric.js": "./src/components/pagination/pager-numeric.js",
     "./components/view-toggle.js": "./src/components/view-toggle/view-toggle.js",
+    "./components/wizard.js": "./src/components/wizard/wizard.js",
+    "./components/wizard-step.js": "./src/components/wizard/step.js",
     "./controllers/computed-value.js": "./src/controllers/computed-values/computed-value.js",
     "./controllers/computed-values.js": "./src/controllers/computed-values/computed-values.js",
     "./controllers/language-listener.js": "./src/controllers/language-listener/language-listener.js"

diff --git a/src/components/view-toggle/README.md b/src/components/view-toggle/README.md
@@ -6,7 +6,7 @@ A Lit element component for toggling between views.
 
 ```html
 <script type="module">
-    import '@brightspace-ui-labs/view-toggle/view-toggle.js';
+    import '@brightspace-ui/labs/components/view-toggle.js';
 </script>
 <d2l-labs-view-toggle
         toggle-options='[{"text":"Bananas","val":"overall"},{"text":"Minions","val":"minios"},{"text":"Pyjamas","val":"subject"}]'

diff --git a/src/components/wizard/README.md b/src/components/wizard/README.md
@@ -0,0 +1,49 @@
+# Wizard
+
+The `<d2l-labs-wizard>` can be used to be display a stepped workflow.
+
+## Usage
+
+```html
+<script type="module">
+    import '@brightspace-ui/labs/components/wizard.js';
+	import '@brightspace-ui/labs/components/wizard-step.js';
+</script>
+<d2l-labs-wizard id="wizard">
+	<d2l-labs-wizard-step step-title="Step 1">
+		<p> First step </p>
+	</d2l-labs-wizard-step>
+
+	<d2l-labs-wizard-step step-title="Step 2">
+		<p> Second step </p>
+	</d2l-labs-wizard-step>
+</d2l-labs-wizard>
+<script>
+	var wizard = document.getElementById('wizard');
+	wizard.addEventListener('stepper-next', function() {
+		wizard.next();
+	});
+	wizard.addEventListener('stepper-restart', function() {
+		wizard.restart();
+	});
+</script>
+```
+
+
+### Properties:
+
+| Properties | Type | Description |
+|--|--|--|
+| `step-title` | String | Text displayed in the wizard step |
+| `restart-button-title` | String | Text that is displayed within the button |
+| `restart-button-tooltip` | String | Text that is displayed within the button tooltip |
+| `hide-restart-button` | Boolean | Hide the Restart button |
+| `next-button-title` | String | Text that is displayed within the button |
+| `next-button-tooltip` | String | Text that is displayed within the button tooltip |
+| `disable-next-button` | Boolean | Disable the Next button |
+| `hide-next-button` | Boolean | Hide the Next button |
+
+### Events:
+- `stepper-next`: dispatched when the Next button is clicked
+- `stepper-restart`: dispatched when the Restart button is clicked
+
diff --git a/src/components/wizard/single-step-header.js b/src/components/wizard/single-step-header.js
@@ -0,0 +1,187 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { bodySmallStyles } from '@brightspace-ui/core/components/typography/styles.js';
+import { LocalizeLabsElement } from '../localize-labs-element.js';
+
+class D2LSingleStepHeader extends LocalizeLabsElement(LitElement) {
+
+	static get properties() {
+		return {
+			stepTitle: {
+				type: String,
+				attribute: 'step-title'
+			},
+			totalSteps: {
+				type: Number,
+				attribute: 'total-steps'
+			},
+			currentStep: {
+				type: Number,
+				attribute: 'current-step'
+			},
+			selectedStep: {
+				type: Number,
+				attribute: 'selected-step'
+			},
+			fillHeaderWidth: {
+				type: Boolean,
+				attribute: 'fill-header-width',
+				reflect: true
+			}
+		};
+	}
+
+	static get styles() {
+		return [bodySmallStyles, css`
+			.d2l-labs-single-step-header-circle {
+				border: 2px solid;
+				border-radius: 50%;
+				height: 26px;
+				width: 26px;
+			}
+
+			.d2l-labs-single-step-header-inner-progress-circle {
+				background-color: var(--d2l-color-celestine);
+				border-radius: 50%;
+				height: 22px;
+				margin: 2px;
+				width: 22px;
+			}
+
+			.d2l-labs-single-step-header-step {
+				display: inline-block;
+				text-align: center;
+			}
+
+			hr {
+				height: 4px;
+				margin: auto;
+				width: 60px;
+			}
+
+			.d2l-labs-single-step-header-step-header {
+				display: flex;
+			}
+
+			.d2l-labs-single-step-header-step-title {
+				background: none !important;
+				border: none !important;
+				color: var(--d2l-color-ferrite);
+				margin: auto;
+				max-width: 120px;
+				overflow-wrap: break-word;
+			}
+
+			:host([fill-header-width]) .d2l-labs-single-step-header-step-title {
+				max-width: 150px;
+			}
+
+			.d2l-labs-single-step-header-done-icon {
+				color: var(--d2l-color-olivine);
+				height: 20px;
+				padding: 2px;
+				width: 20px;
+			}
+
+			.d2l-labs-single-step-header-done {
+				border-color: var(--d2l-color-olivine);
+				color: var(--d2l-color-olivine);
+			}
+
+			.d2l-labs-single-step-header-done hr,
+			.d2l-labs-single-step-header-in-progress hr:first-child {
+				background: var(--d2l-color-olivine);
+				border: var(--d2l-color-olivine);
+			}
+
+			.d2l-labs-single-step-header-in-progress {
+				border-color: var(--d2l-color-celestine);
+				color: var(--d2l-color-celestine);
+			}
+
+			.d2l-labs-single-step-header-not-started .d2l-labs-single-step-header-circle {
+				background-color: var(--d2l-color-mica);
+				border-color: var(--d2l-color-mica);
+			}
+
+			.d2l-labs-single-step-header-in-progress hr:last-child,
+			.d2l-labs-single-step-header-not-started hr {
+				background: var(--d2l-color-mica);
+				border: var(--d2l-color-mica);
+			}
+
+			.d2l-labs-single-step-header-first hr:first-child,
+			.d2l-labs-single-step-header-last hr:last-child {
+				visibility: hidden;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+
+		this.stepTitle = '';
+		this.totalSteps = 0;
+		this.currentStep = 0;
+		this.selectedStep = 0;
+		this.fillHeaderWidth = false;
+	}
+
+	render() {
+		return html`
+			<div class="${this._getIsFirst()} ${this._getIsLast()}">
+				<div class="d2l-labs-single-step-header-step">
+					<div class="${this._getProgressStatus()} d2l-labs-single-step-header-step-header">
+						<hr>
+
+						<div class="d2l-labs-single-step-header-circle" title="${this._getStepLabel()}">
+							${this._isDone() ? html`<d2l-icon class="d2l-labs-single-step-header-done-icon" icon="d2l-tier1:check"></d2l-icon>` : nothing}
+							${this._isInProgress() ? html`<div class="d2l-labs-single-step-header-inner-progress-circle"></div>` : nothing}
+						</div>
+
+						<hr>
+					</div>
+					<div class="${this._getProgressStatus()} d2l-labs-single-step-header-step-title d2l-body-small">${this.stepTitle}</div>
+				</div>
+			</div>
+		`;
+	}
+
+	_getIsFirst() {
+		if (this.currentStep === 0) {
+			return 'd2l-labs-single-step-header-first';
+		}
+		return '';
+	}
+
+	_getIsLast() {
+		if (this.totalSteps === this.currentStep + 1) {
+			return 'd2l-labs-single-step-header-last';
+		}
+		return '';
+	}
+
+	_getProgressStatus() {
+		let className = 'd2l-labs-single-step-header-not-started';
+		if (this._isDone()) {
+			className = 'd2l-labs-single-step-header-done';
+		} else if (this._isInProgress()) {
+			className = 'd2l-labs-single-step-header-in-progress';
+		}
+		return className;
+	}
+
+	_getStepLabel() {
+		return this.localize('components:wizard:aria.steplabel', 'totalSteps', this.totalSteps, 'currentStep', this.currentStep + 1);
+	}
+
+	_isDone() {
+		return this.currentStep < this.selectedStep;
+	}
+
+	_isInProgress() {
+		return this.currentStep === this.selectedStep;
+	}
+
+}
+
+customElements.define('d2l-labs-single-step-header', D2LSingleStepHeader);