fix: add paused state to progress (#2197)

* fix: add paused state to progress

Author: eljefe223

packages/fast-components-class-name-contracts-msft/src/progress/index.ts

@@ -9,6 +9,11 @@ export interface ProgressClassNameContract extends BaseProgressClassNameContract
      */
     progress__circular?: string;
 
+    /**
+     * The root progress paused modifier
+     */
+    progress__paused?: string;
+
     /**
      * The progress size control modifier
      */

packages/fast-components-react-msft/src/progress/progress.props.ts

@@ -23,12 +23,17 @@ export interface ProgressHandledProps
     extends Subtract<BaseProgressHandledProps, BaseProgressManagedClasses>,
         ProgressManagedClasses {
     /**
-     * The progess circular prop
+     * The progress circular prop
      */
     circular?: boolean;
 
     /**
-     * The progess size prop
+     * The progress paused prop
+     */
+    paused?: boolean;
+
+    /**
+     * The progress size prop
      */
     size?: ProgressSize;
 }

packages/fast-components-react-msft/src/progress/progress.schema.ts

@@ -23,6 +23,11 @@ export default {
             type: "boolean",
             default: false,
         },
+        paused: {
+            title: "Paused",
+            type: "boolean",
+            default: false,
+        },
         size: {
             title: "Circular progress size",
             type: "string",

packages/fast-components-react-msft/src/progress/progress.spec.tsx

@@ -14,6 +14,7 @@ configure({ adapter: new Adapter() });
 const managedClasses: ProgressClassNameContract = {
     progress: "progress-class",
     progress__circular: "progress__circular-class",
+    progress__paused: "progress__paused-class",
     progress_circularSVG__control: "progress_circularSVG__control-class",
     progress_circularSVG__container: "progress_circularSVG__container-class",
     progress_circularSVG__page: "progress_circularSVG__page-class",
@@ -67,6 +68,14 @@ describe("progress", (): void => {
         expect(rendered.exists("div.progress__circular-class")).toBe(true);
     });
 
+    test("should use paused class names when paused prop is set to true", () => {
+        const rendered: any = mount(
+            <MSFTProgress managedClasses={managedClasses} paused={true} />
+        );
+
+        expect(rendered.exists("div.progress__paused-class")).toBe(true);
+    });
+
     test("should use not use interdeterminate class names when value prop is set", () => {
         const rendered: any = shallow(
             <MSFTProgress managedClasses={managedClasses} circular={true} value={75} />

packages/fast-components-react-msft/src/progress/progress.tsx

@@ -19,6 +19,7 @@ class Progress extends Foundation<ProgressHandledProps, ProgressUnhandledProps,
         minValue: 0,
         maxValue: 100,
         circular: false,
+        paused: false,
         size: ProgressSize.container,
         managedClasses: {},
     };
@@ -34,6 +35,7 @@ class Progress extends Foundation<ProgressHandledProps, ProgressUnhandledProps,
         maxValue: void 0,
         managedClasses: void 0,
         circular: void 0,
+        paused: void 0,
         size: void 0,
     };
 
@@ -62,10 +64,15 @@ class Progress extends Foundation<ProgressHandledProps, ProgressUnhandledProps,
         const {
             progress,
             progress__circular,
+            progress__paused,
         }: Partial<ProgressClassNameContract> = this.props.managedClasses;
 
         return super.generateClassNames(
-            classNames(progress, [progress__circular, this.props.circular])
+            classNames(
+                progress,
+                [progress__circular, this.props.circular],
+                [progress__paused, this.props.paused]
+            )
         );
     }
 

packages/fast-components-styles-msft/src/progress/index.ts

@@ -4,7 +4,11 @@ import designSystemDefaults, {
 } from "../design-system";
 import { ComponentStyles, ComponentStyleSheet } from "@microsoft/fast-jss-manager";
 import { ProgressClassNameContract } from "@microsoft/fast-components-class-name-contracts-msft";
-import { accentFillRest, neutralFillRest } from "../utilities/color";
+import {
+    accentFillRest,
+    neutralFillRest,
+    neutralForegroundHint,
+} from "../utilities/color";
 import { multiply, toPx } from "@microsoft/fast-jss-utilities";
 import { designUnit } from "../utilities/design-system";
 import { glyphSize, height, heightNumber } from "../utilities/density";
@@ -44,6 +48,25 @@ const styles: ComponentStyles<ProgressClassNameContract, DesignSystem> = {
             },
         },
     },
+    progress__paused: {
+        "& $progress_valueIndicator": {
+            background: neutralForegroundHint,
+            stroke: neutralForegroundHint,
+        },
+        "& $progress_dot": {
+            "background-color": neutralFillRest,
+        },
+        "& $progress_dot__1": {
+            "animation-play-state": "paused",
+        },
+        "& $progress_dot__2": {
+            "animation-play-state": "paused",
+        },
+        "& $progress_valueIndicator__indeterminate": {
+            "animation-play-state": "paused",
+            stroke: neutralFillRest,
+        },
+    },
     progress_circularSVG__control: {
         height: glyphSize,
         width: glyphSize,