updated to add stories

microsoft · Oct 5, 2021 · 9b50d9a · 9b50d9a
1 parent a5bb17a
commit 9b50d9a
Showing 1 changed file with 41 additions and 5 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
@@ -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>
 `;
@@ -27,17 +25,55 @@ ProgressRing.args = {
 };
 
 const defaultExample = `
-<fluent-progress-ring min="0" max="100" value="${ProgressRing.args.value}"></fluent-progress-ring>
+<fluent-progress-ring value="${ProgressRing.args.value}"></fluent-progress-ring>
 `;
 
+ProgressRing.parameters = {
+  docs: {
+    source: {
+      code: defaultExample,
+    },
+  },
+};
+
+const ProgressRingAnimatedTemplate = ({ paused, value }) => `
+  <fluent-progress-ring
+    ${paused ? `paused="${paused}"` : ''}
+  ></fluent-progress-ring>
+`;
+
+export const ProgressRingAnimated = ProgressRingAnimatedTemplate.bind({});
+
+ProgressRingAnimated.args = {
+  paused: false,
+};
+
+export const ProgressRingPaused = ProgressRingAnimatedTemplate.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,
     },
   },
 };