From df9253ee6e818da9c40ee1ed55d04d7e209a1863 Mon Sep 17 00:00:00 2001
From: Michael Van Sickle <mvansickle1@gmail.com>
Date: Wed, 27 Nov 2019 10:08:05 -0500
Subject: [PATCH] move progress bar examples

---
 src/examples/src/config.tsx                   | 22 +++++++++++++++
 src/examples/src/widgets/progress/Basic.tsx   |  2 +-
 .../progress/ProgressWithChangingValues.tsx   | 27 +++++++++++++++++++
 .../progress/ProgressWithCustomOutput.tsx     | 17 ++++++++++++
 .../src/widgets/progress/ProgressWithMax.tsx  |  8 ++++++
 .../progress/ProgressWithoutOutput.tsx        |  8 ++++++
 6 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 src/examples/src/widgets/progress/ProgressWithChangingValues.tsx
 create mode 100644 src/examples/src/widgets/progress/ProgressWithCustomOutput.tsx
 create mode 100644 src/examples/src/widgets/progress/ProgressWithMax.tsx
 create mode 100644 src/examples/src/widgets/progress/ProgressWithoutOutput.tsx

diff --git a/src/examples/src/config.tsx b/src/examples/src/config.tsx
index d0c5c73552..bc9d50c2cf 100644
--- a/src/examples/src/config.tsx
+++ b/src/examples/src/config.tsx
@@ -67,6 +67,10 @@ import MenuPopup from './widgets/popup/MenuPopup';
 import SetWidth from './widgets/popup/SetWidth';
 import Underlay from './widgets/popup/Underlay';
 import BasicProgress from './widgets/progress/Basic';
+import ProgressWithChangingValues from './widgets/progress/ProgressWithChangingValues';
+import ProgressWithCustomOutput from './widgets/progress/ProgressWithCustomOutput';
+import ProgressWithMax from './widgets/progress/ProgressWithMax';
+import ProgressWithoutOutput from './widgets/progress/ProgressWithoutOutput';
 import BasicRadio from './widgets/radio/Basic';
 import BasicRaisedButton from './widgets/raised-button/Basic';
 import RaisedDisabledSubmit from './widgets/raised-button/DisabledSubmit';
@@ -557,6 +561,24 @@ export const config = {
 			}
 		},
 		progress: {
+			examples: [
+				{
+					filename: 'ProgressWithChangingValues',
+					module: ProgressWithChangingValues
+				},
+				{
+					filename: 'ProgressWithMax',
+					module: ProgressWithMax
+				},
+				{
+					filename: 'ProgressWithCustomOutput',
+					module: ProgressWithCustomOutput
+				},
+				{
+					filename: 'ProgressWithoutOutput',
+					module: ProgressWithoutOutput
+				}
+			],
 			overview: {
 				example: {
 					filename: 'Basic',
diff --git a/src/examples/src/widgets/progress/Basic.tsx b/src/examples/src/widgets/progress/Basic.tsx
index 98723913f9..be6a761e8c 100644
--- a/src/examples/src/widgets/progress/Basic.tsx
+++ b/src/examples/src/widgets/progress/Basic.tsx
@@ -4,5 +4,5 @@ import Progress from '@dojo/widgets/progress';
 const factory = create();
 
 export default factory(function Basic() {
-	return <Progress value={250} />;
+	return <Progress value={50} />;
 });
diff --git a/src/examples/src/widgets/progress/ProgressWithChangingValues.tsx b/src/examples/src/widgets/progress/ProgressWithChangingValues.tsx
new file mode 100644
index 0000000000..ca46d3e1b4
--- /dev/null
+++ b/src/examples/src/widgets/progress/ProgressWithChangingValues.tsx
@@ -0,0 +1,27 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import { icache } from '@dojo/framework/core/middleware/icache';
+import Progress from '@dojo/widgets/progress';
+import Button from '@dojo/widgets/button';
+
+const factory = create({ icache });
+
+export default factory(function ProgressWithChangingvalues({ middleware: { icache } }) {
+	const max = 100;
+	const step = 10;
+	const value = icache.getOrSet<number>('value', 0);
+	return (
+		<div>
+			<Progress value={value} max={max} />
+			<div>
+				<Button onClick={() => icache.set('value', value - step < 0 ? 0 : value - step)}>
+					Decrease
+				</Button>
+				<Button
+					onClick={() => icache.set('value', value + step > max ? max : value + step)}
+				>
+					Increase
+				</Button>
+			</div>
+		</div>
+	);
+});
diff --git a/src/examples/src/widgets/progress/ProgressWithCustomOutput.tsx b/src/examples/src/widgets/progress/ProgressWithCustomOutput.tsx
new file mode 100644
index 0000000000..7a541360f5
--- /dev/null
+++ b/src/examples/src/widgets/progress/ProgressWithCustomOutput.tsx
@@ -0,0 +1,17 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import Progress from '@dojo/widgets/progress';
+
+const factory = create();
+
+export default factory(function ProgressWithCustomOutput() {
+	const value = 250;
+	const max = 750;
+
+	return (
+		<Progress
+			value={value}
+			max={max}
+			output={(value, percent) => `${value} of ${max} is ${percent}%`}
+		/>
+	);
+});
diff --git a/src/examples/src/widgets/progress/ProgressWithMax.tsx b/src/examples/src/widgets/progress/ProgressWithMax.tsx
new file mode 100644
index 0000000000..9bc63c6843
--- /dev/null
+++ b/src/examples/src/widgets/progress/ProgressWithMax.tsx
@@ -0,0 +1,8 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import Progress from '@dojo/widgets/progress';
+
+const factory = create();
+
+export default factory(function ProgressWithMax() {
+	return <Progress value={0.3} max={1} />;
+});
diff --git a/src/examples/src/widgets/progress/ProgressWithoutOutput.tsx b/src/examples/src/widgets/progress/ProgressWithoutOutput.tsx
new file mode 100644
index 0000000000..b0964d62a9
--- /dev/null
+++ b/src/examples/src/widgets/progress/ProgressWithoutOutput.tsx
@@ -0,0 +1,8 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import Progress from '@dojo/widgets/progress';
+
+const factory = create();
+
+export default factory(function ProgressWithoutOutput() {
+	return <Progress value={50} showOutput={false} />;
+});