(web components) add progress and progress ring examples to show animated options

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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,
     },
   },
 };

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,
     },
   },
 };