From 93d80f4a8f4cbbd85fe9dde871b3937b46fb57ae Mon Sep 17 00:00:00 2001
From: Seth Donohue <sethdonohue@Admins-MBP.guest.corp.microsoft.com>
Date: Tue, 5 Oct 2021 11:25:34 -0700
Subject: [PATCH 1/4] add progress examples

---
 .../progress/progress-ring/progress-ring.stories.ts   | 11 ++++++++---
 .../src/progress/progress/progress.stories.ts         |  6 +++++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts b/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts
index 52fd4674fcef2..825f47ad1380b 100644
--- a/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts
+++ b/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts
@@ -10,8 +10,11 @@ export default {
   },
 };
 
-const ProgressRingTemplate = ({ paused }) => `
-  <fluent-progress-ring 
+const ProgressRingTemplate = ({ paused, value }) => `
+  <fluent-progress-ring
+    ${value ? `value="${value}"` : ''}
+  ></fluent-progress-ring>
+  <fluent-progress-ring
     ${paused ? `paused="${paused}"` : ''}
   ></fluent-progress-ring>
 `;
@@ -20,10 +23,12 @@ export const ProgressRing = ProgressRingTemplate.bind({});
 
 ProgressRing.args = {
   paused: false,
+  value: 65,
 };
 
 const example = `
-<fluent-progress-ring min="0" max="100" value="75"></fluent-progress-ring>
+<fluent-progress-ring min="0" max="100" value="${ProgressRing.args.value}"></fluent-progress-ring>
+<fluent-progress-ring></fluent-progress-ring>
 `;
 ProgressRing.parameters = {
   docs: {
diff --git a/packages/web-components/src/progress/progress/progress.stories.ts b/packages/web-components/src/progress/progress/progress.stories.ts
index d953785d7c63e..d1fa44e7636ed 100644
--- a/packages/web-components/src/progress/progress/progress.stories.ts
+++ b/packages/web-components/src/progress/progress/progress.stories.ts
@@ -15,6 +15,9 @@ const ProgressTemplate = ({ paused, value }) => `
     ${paused ? `paused="${paused}"` : ''}
     ${value ? `value=${value}` : ''}
   ></fluent-progress>
+  <fluent-progress style="margin-top:10px;"
+    ${paused ? `paused="${paused}"` : ''}
+  ></fluent-progress>
 `;
 
 export const Progress = ProgressTemplate.bind({});
@@ -25,7 +28,8 @@ Progress.args = {
 };
 
 const example = `
-<fluent-progress min="0" max="100" value="75"></fluent-progress>
+<fluent-progress min="0" max="100" value="${Progress.args.value}"></fluent-progress>
+<fluent-progress></fluent-progress>
 `;
 
 Progress.parameters = {

From f4efa5f03b16493c9546489e31b8f78781c0d2b2 Mon Sep 17 00:00:00 2001
From: Seth Donohue <sethdonohue@Admins-MBP.guest.corp.microsoft.com>
Date: Tue, 5 Oct 2021 13:20:58 -0700
Subject: [PATCH 2/4] Change files

---
 ...eb-components-55f65ed0-ac39-47d7-bc32-a3659e17e612.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-web-components-55f65ed0-ac39-47d7-bc32-a3659e17e612.json

diff --git a/change/@fluentui-web-components-55f65ed0-ac39-47d7-bc32-a3659e17e612.json b/change/@fluentui-web-components-55f65ed0-ac39-47d7-bc32-a3659e17e612.json
new file mode 100644
index 0000000000000..d909aa278c24e
--- /dev/null
+++ b/change/@fluentui-web-components-55f65ed0-ac39-47d7-bc32-a3659e17e612.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add progress animated examples",
+  "packageName": "@fluentui/web-components",
+  "email": "sethdonohue@Admins-MBP.guest.corp.microsoft.com",
+  "dependentChangeType": "patch"
+}

From a5bb17a0dce5801e34193c543133d307c961af95 Mon Sep 17 00:00:00 2001
From: Seth Donohue <sethdonohue@Admins-MBP.guest.corp.microsoft.com>
Date: Tue, 5 Oct 2021 13:24:45 -0700
Subject: [PATCH 3/4] update to separate examples out

---
 .../src/progress/progress-ring/progress-ring.stories.ts   | 8 ++++++--
 .../src/progress/progress/progress.stories.ts             | 7 +++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts b/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts
index 825f47ad1380b..70b561947d746 100644
--- a/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts
+++ b/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts
@@ -26,14 +26,18 @@ ProgressRing.args = {
   value: 65,
 };
 
-const example = `
+const defaultExample = `
 <fluent-progress-ring min="0" max="100" value="${ProgressRing.args.value}"></fluent-progress-ring>
+`;
+
+const animatedExample = `
 <fluent-progress-ring></fluent-progress-ring>
 `;
+
 ProgressRing.parameters = {
   docs: {
     source: {
-      code: example,
+      code: defaultExample + animatedExample,
     },
   },
 };
diff --git a/packages/web-components/src/progress/progress/progress.stories.ts b/packages/web-components/src/progress/progress/progress.stories.ts
index d1fa44e7636ed..3e5b5c3fe1ce3 100644
--- a/packages/web-components/src/progress/progress/progress.stories.ts
+++ b/packages/web-components/src/progress/progress/progress.stories.ts
@@ -27,15 +27,18 @@ Progress.args = {
   paused: false,
 };
 
-const example = `
+const defaultExample = `
 <fluent-progress min="0" max="100" value="${Progress.args.value}"></fluent-progress>
+`;
+
+const animatedExample = `
 <fluent-progress></fluent-progress>
 `;
 
 Progress.parameters = {
   docs: {
     source: {
-      code: example,
+      code: defaultExample + animatedExample,
     },
   },
 };

From dff3c19385ae9e616bb63d739ce453c8b83010e2 Mon Sep 17 00:00:00 2001
From: Seth Donohue <sethdonohue@Admins-MBP.guest.corp.microsoft.com>
Date: Tue, 5 Oct 2021 13:49:50 -0700
Subject: [PATCH 4/4] updated to add stories

---
 .../progress-ring/progress-ring.stories.ts    | 38 +++++++++++++++--
 .../src/progress/progress/progress.stories.ts | 41 ++++++++++++++++---
 2 files changed, 69 insertions(+), 10 deletions(-)

diff --git a/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts b/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts
index 70b561947d746..a9f66469ed8f8 100644
--- a/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts
+++ b/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts
@@ -13,8 +13,6 @@ export default {
 const ProgressRingTemplate = ({ paused, value }) => `
   <fluent-progress-ring
     ${value ? `value="${value}"` : ''}
-  ></fluent-progress-ring>
-  <fluent-progress-ring
     ${paused ? `paused="${paused}"` : ''}
   ></fluent-progress-ring>
 `;
@@ -30,14 +28,46 @@ const defaultExample = `
 <fluent-progress-ring min="0" max="100" value="${ProgressRing.args.value}"></fluent-progress-ring>
 `;
 
+ProgressRing.parameters = {
+  docs: {
+    source: {
+      code: defaultExample,
+    },
+  },
+};
+
+export const ProgressRingAnimated = ProgressRingTemplate.bind({});
+
+ProgressRingAnimated.args = {
+  paused: false,
+};
+
+export const ProgressRingPaused = ProgressRingTemplate.bind({});
+
+ProgressRingPaused.args = {
+  paused: true,
+};
+
 const animatedExample = `
 <fluent-progress-ring></fluent-progress-ring>
 `;
 
-ProgressRing.parameters = {
+const pausedExample = `
+<fluent-progress-ring paused></fluent-progress-ring>
+`;
+
+ProgressRingAnimated.parameters = {
+  docs: {
+    source: {
+      code: animatedExample,
+    },
+  },
+};
+
+ProgressRingPaused.parameters = {
   docs: {
     source: {
-      code: defaultExample + animatedExample,
+      code: pausedExample,
     },
   },
 };
diff --git a/packages/web-components/src/progress/progress/progress.stories.ts b/packages/web-components/src/progress/progress/progress.stories.ts
index 3e5b5c3fe1ce3..d33dff95734af 100644
--- a/packages/web-components/src/progress/progress/progress.stories.ts
+++ b/packages/web-components/src/progress/progress/progress.stories.ts
@@ -15,30 +15,59 @@ const ProgressTemplate = ({ paused, value }) => `
     ${paused ? `paused="${paused}"` : ''}
     ${value ? `value=${value}` : ''}
   ></fluent-progress>
-  <fluent-progress style="margin-top:10px;"
-    ${paused ? `paused="${paused}"` : ''}
-  ></fluent-progress>
 `;
 
 export const Progress = ProgressTemplate.bind({});
 
 Progress.args = {
-  value: 50,
   paused: false,
+  value: 50,
 };
 
 const defaultExample = `
 <fluent-progress min="0" max="100" value="${Progress.args.value}"></fluent-progress>
 `;
 
+Progress.parameters = {
+  docs: {
+    source: {
+      code: defaultExample,
+    },
+  },
+};
+
+export const ProgressAnimated = ProgressTemplate.bind({});
+
+ProgressAnimated.args = {
+  paused: false,
+};
+
+export const ProgressPaused = ProgressTemplate.bind({});
+
+ProgressPaused.args = {
+  paused: true,
+};
+
 const animatedExample = `
 <fluent-progress></fluent-progress>
 `;
 
-Progress.parameters = {
+const pausedExample = `
+<fluent-progress paused></fluent-progress>
+`;
+
+ProgressAnimated.parameters = {
+  docs: {
+    source: {
+      code: animatedExample,
+    },
+  },
+};
+
+ProgressPaused.parameters = {
   docs: {
     source: {
-      code: defaultExample + animatedExample,
+      code: pausedExample,
     },
   },
 };