From c0e68d8775ecf2621cc3cbf302b63bbe83029645 Mon Sep 17 00:00:00 2001
From: Seth Donohue <31681651+SethDonohue@users.noreply.github.com>
Date: Thu, 7 Oct 2021 00:16:40 -0700
Subject: [PATCH] (web components) add progress and progress ring examples to
 show animated options (#20114)

* add progress examples

* Change files

* update to separate examples out

* updated to add stories

Co-authored-by: Seth Donohue <sethdonohue@Admins-MBP.guest.corp.microsoft.com>
---
 ...-55f65ed0-ac39-47d7-bc32-a3659e17e612.json |  7 +++
 .../progress-ring/progress-ring.stories.ts    | 49 +++++++++++++++++--
 .../src/progress/progress/progress.stories.ts | 44 +++++++++++++++--
 3 files changed, 91 insertions(+), 9 deletions(-)
 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 00000000000000..d909aa278c24e1
--- /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"
+}
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 52fd4674fcef27..a9f66469ed8f8e 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,9 @@ export default {
   },
 };
 
-const ProgressRingTemplate = ({ paused }) => `
-  <fluent-progress-ring 
+const ProgressRingTemplate = ({ paused, value }) => `
+  <fluent-progress-ring
+    ${value ? `value="${value}"` : ''}
     ${paused ? `paused="${paused}"` : ''}
   ></fluent-progress-ring>
 `;
@@ -20,15 +21,53 @@ 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>
+const defaultExample = `
+<fluent-progress-ring min="0" max="100" value="${ProgressRing.args.value}"></fluent-progress-ring>
 `;
+
 ProgressRing.parameters = {
   docs: {
     source: {
-      code: example,
+      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>
+`;
+
+const pausedExample = `
+<fluent-progress-ring paused></fluent-progress-ring>
+`;
+
+ProgressRingAnimated.parameters = {
+  docs: {
+    source: {
+      code: animatedExample,
+    },
+  },
+};
+
+ProgressRingPaused.parameters = {
+  docs: {
+    source: {
+      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 d953785d7c63e5..d33dff95734af3 100644
--- a/packages/web-components/src/progress/progress/progress.stories.ts
+++ b/packages/web-components/src/progress/progress/progress.stories.ts
@@ -20,18 +20,54 @@ const ProgressTemplate = ({ paused, value }) => `
 export const Progress = ProgressTemplate.bind({});
 
 Progress.args = {
-  value: 50,
   paused: false,
+  value: 50,
 };
 
-const example = `
-<fluent-progress min="0" max="100" value="75"></fluent-progress>
+const defaultExample = `
+<fluent-progress min="0" max="100" value="${Progress.args.value}"></fluent-progress>
 `;
 
 Progress.parameters = {
   docs: {
     source: {
-      code: example,
+      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>
+`;
+
+const pausedExample = `
+<fluent-progress paused></fluent-progress>
+`;
+
+ProgressAnimated.parameters = {
+  docs: {
+    source: {
+      code: animatedExample,
+    },
+  },
+};
+
+ProgressPaused.parameters = {
+  docs: {
+    source: {
+      code: pausedExample,
     },
   },
 };