move progress bar examples

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',

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} />;
 });

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>
+	);
+});

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}%`}
+		/>
+	);
+});

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} />;
+});

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} />;
+});