Added progress-ring component (#51)

# Pull Request

## 📖 Description

<!--- Provide some background and a description of your work. -->
Adds the progress-ring foundation component.

### 🎫 Issues

<!---
List and link relevant issues here using the keyword "closes"
if this PR will close an issue, eg. closes #411
-->
Continued work on #31

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [x] I have added tests for my changes.
- [x] I have tested my changes.
- [x] I have updated the project documentation to reflect my changes.

## ⏭ Next Steps

<!---
If there is relevant follow-up work to this PR, please list any existing issues or provide brief descriptions of what you would like to do next.
-->
- Continue adding foundation components

change/@microsoft-fast-cli-ca63fba5-69f5-4eff-9b5f-7a7f3ebb03b5.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Added progress-ring component",
+  "packageName": "@microsoft/fast-cli",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/fast-cli/src/components/options.ts

@@ -6,5 +6,6 @@ export const availableTemplates = [
     "dialog",
     "disclosure",
     "number-field",
+    "progress-ring",
     "search",
 ]

packages/fast-cli/src/components/progress-ring/README.md

@@ -0,0 +1,3 @@
+# Description
+
+This template is used as a progress-ring component template from which a user can modify without having to do the initial scaffolding.

packages/fast-cli/src/components/progress-ring/template.pw.spec.ts

@@ -0,0 +1,59 @@
+import { expect, test } from "@playwright/test";
+import { execSync } from "child_process";
+import path from "path";
+import fs from "fs-extra";
+import {
+    expectedGeneratedComponentTemplateFiles,
+    setup,
+    teardown,
+    getTempDir,
+    getTempComponentDir,
+} from "../../test/helpers.js";
+
+const uuid: string = "progress-ring";
+const tempDir: string = getTempDir(uuid);
+const tempComponentDir: string = getTempComponentDir(uuid);
+
+test.describe(`CLI add-foundation-component ${uuid}`, () => {
+    test.beforeAll(() => {
+        setup(tempDir, tempComponentDir);
+        execSync(`cd ${tempDir} && npm run fast:init`);
+        setup(tempDir, tempComponentDir);
+        execSync(`cd ${tempDir} && npm run fast:add-foundation-component:${uuid}`);
+    });
+    test.afterAll(() => {
+        teardown(tempDir, tempComponentDir);
+    });
+    test("should copy files from the template", () => {
+        let files: Array<string> = [];
+
+        function testGeneratedFiles(folderName: string) {
+            const tempDirContents = fs.readdirSync(path.resolve(tempDir, "src/components/test-component", folderName));
+            const tempDirContentsWithFileTypes = fs.readdirSync(path.resolve(tempDir, "src/components/test-component", folderName), {
+                withFileTypes: true
+            });
+
+            for (let i = 0, contentLength = tempDirContents.length; i < contentLength; i++) {
+                if (tempDirContentsWithFileTypes[i].isDirectory()) {
+                    testGeneratedFiles(tempDirContents[i]);
+                } else {
+                    files.push(
+                        folderName
+                            ? `${folderName}/${tempDirContents[i]}`
+                            : tempDirContents[i]
+                    );
+                }
+            }
+        }
+
+        testGeneratedFiles("");
+        expect(files).toEqual(expectedGeneratedComponentTemplateFiles);
+    });
+    test("should be able to run the build", () => {
+        expect(
+            () => {
+                execSync(`cd ${tempDir} && npm run build`);
+            }
+        ).not.toThrow();
+    });
+});

packages/fast-cli/src/components/progress-ring/template/README.ts

@@ -0,0 +1,7 @@
+import type { ComponentTemplateConfig } from "../../../utilities/template";
+
+export default (config: ComponentTemplateConfig): string => `
+# ${config.className}
+Progress components are used to display the length of time a process will take or to visualize percentage value (referred to as a **determinate** state) and to represent an unspecified wait time (referred to as an **indeterminate** state). This progress component should be used for a circular visual appearance.
+
+For more information on the building blocks used to create this component, please refer to https://www.fast.design/docs/components/progress`;

packages/fast-cli/src/components/progress-ring/template/component.definition.ts

@@ -0,0 +1,29 @@
+import type { ComponentTemplateConfig } from "../../../utilities/template";
+
+export default (config: ComponentTemplateConfig): string => 
+`import { template } from "./${config.tagName}.template.js";
+import { styles } from "./${config.tagName}.styles.js";
+
+export const definition = {
+    baseName: "${config.tagName}",
+    template,
+    styles,
+    indeterminateIndicator: /* html */ \`
+        <svg class="progress" part="progress" viewBox="0 0 16 16">
+            <circle
+                class="background"
+                part="background"
+                cx="8px"
+                cy="8px"
+                r="7px"
+            ></circle>
+            <circle
+                class="indeterminate-indicator-1"
+                part="indeterminate-indicator-1"
+                cx="8px"
+                cy="8px"
+                r="7px"
+            ></circle>
+        </svg>
+    \`
+}`; 

packages/fast-cli/src/components/progress-ring/template/component.pw.spec.ts

@@ -0,0 +1,21 @@
+import type { ComponentTemplateConfig } from "../../../utilities/template";
+
+export default (config: ComponentTemplateConfig): string => `
+import { expect, test } from "@playwright/test";
+import { fixtureURL } from "@microsoft/fast-cli/dist/esm/utilities/playwright.js";
+
+test.describe("${config.tagName}", () => {
+    const fixture = fixtureURL("${config.tagName}");
+    test.beforeEach(async ({ page }) => {
+        await page.goto(fixture);
+    });
+    test("should load the fixture URL", async ({ page }) => {
+        const pageUrl = page.url();
+        expect(pageUrl).toBe(\`http://localhost:3000/\${fixture}\`);
+    });
+    test("should contain the component in the URL", async ({ page }) => {
+        const element = page.locator("${config.tagName}");
+        await expect(element).not.toBeNull();
+    });
+});
+` 

packages/fast-cli/src/components/progress-ring/template/component.stories.ts

@@ -0,0 +1,11 @@
+import type { ComponentTemplateConfig } from "../../../utilities/template";
+
+export default (config: ComponentTemplateConfig): string => `
+import Template from "./fixtures/base.html";
+import "./define.js";
+
+export default {
+    title: "${config.tagName}",
+};
+export const ${config.className} = () => Template;
+`; 

packages/fast-cli/src/components/progress-ring/template/component.styles.ts

@@ -0,0 +1,103 @@
+import type { ComponentTemplateConfig } from "../../../utilities/template";
+
+export default (config: ComponentTemplateConfig): string =>
+`import { css, ElementStyles } from "@microsoft/fast-element";
+import {
+    display,
+    forcedColorsStylesheetBehavior,
+    FoundationElementTemplate,
+    ProgressRingOptions,
+} from "@microsoft/fast-foundation";
+import { SystemColors } from "@microsoft/fast-web-utilities";
+import {
+    accentForegroundRest,
+    heightNumber,
+    neutralFillRest,
+    neutralForegroundHint,
+} from "@microsoft/adaptive-ui";
+
+/**
+ * Styles for ${config.className}
+ * @public
+ */
+export const styles: FoundationElementTemplate<ElementStyles> = (
+    context,
+    definition
+) => 
+    css\`
+        \${display("flex")} :host {
+            align-items: center;
+            outline: none;
+            height: calc(\${heightNumber} * 1px);
+            width: calc(\${heightNumber} * 1px);
+            margin: calc(\${heightNumber} * 1px) 0;
+        }
+        .progress {
+            height: 100%;
+            width: 100%;
+        }
+        .background {
+            stroke: \${neutralFillRest};
+            fill: none;
+            stroke-width: 2px;
+        }
+        .determinate {
+            stroke: \${accentForegroundRest};
+            fill: none;
+            stroke-width: 2px;
+            stroke-linecap: round;
+            transform-origin: 50% 50%;
+            transform: rotate(-90deg);
+            transition: all 0.2s ease-in-out;
+        }
+        .indeterminate-indicator-1 {
+            stroke: \${accentForegroundRest};
+            fill: none;
+            stroke-width: 2px;
+            stroke-linecap: round;
+            transform-origin: 50% 50%;
+            transform: rotate(-90deg);
+            transition: all 0.2s ease-in-out;
+            animation: spin-infinite 2s linear infinite;
+        }
+        :host([paused]) .indeterminate-indicator-1 {
+            animation-play-state: paused;
+            stroke: \${neutralFillRest};
+        }
+        :host([paused]) .determinate {
+            stroke: \${neutralForegroundHint};
+        }
+        @keyframes spin-infinite {
+            0% {
+                stroke-dasharray: 0.01px 43.97px;
+                transform: rotate(0deg);
+            }
+            50% {
+                stroke-dasharray: 21.99px 21.99px;
+                transform: rotate(450deg);
+            }
+            100% {
+                stroke-dasharray: 0.01px 43.97px;
+                transform: rotate(1080deg);
+            }
+        }
+    \`.withBehaviors(
+        forcedColorsStylesheetBehavior(
+            css\`
+                .indeterminate-indicator-1,
+                .determinate {
+                    stroke: \${SystemColors.FieldText};
+                }
+                .background {
+                    stroke: \${SystemColors.Field};
+                }
+                :host([paused]) .indeterminate-indicator-1 {
+                    stroke: \${SystemColors.Field};
+                }
+                :host([paused]) .determinate {
+                    stroke: \${SystemColors.GrayText};
+                }
+            \`
+        )
+    );
+`;

packages/fast-cli/src/components/progress-ring/template/component.template.ts

@@ -0,0 +1,12 @@
+import type { ComponentTemplateConfig } from "../../../utilities/template";
+
+export default (config: ComponentTemplateConfig): string => `
+import { BaseProgress, progressRingTemplate, FoundationElementTemplate } from "@microsoft/fast-foundation";
+import type { ViewTemplate } from "@microsoft/fast-element";
+
+/**
+ * The template for ${config.className} component.
+ * @public
+ */
+export const template: FoundationElementTemplate<ViewTemplate<BaseProgress>> = progressRingTemplate;
+`; 

packages/fast-cli/src/components/progress-ring/template/component.ts

@@ -0,0 +1,8 @@
+import type { ComponentTemplateConfig } from "../../../utilities/template";
+
+export default (config: ComponentTemplateConfig): string =>
+`import { BaseProgress } from "@microsoft/fast-foundation";
+/**
+ * A class derived from the BaseProgress foundation component
+ */
+export class ${config.className} extends BaseProgress {};` 

packages/fast-cli/src/components/progress-ring/template/define.ts

@@ -0,0 +1,7 @@
+import type { ComponentTemplateConfig } from "../../../utilities/template";
+
+export default (config: ComponentTemplateConfig): string =>
+`import { ${config.className} } from "./${config.tagName}.js";
+import { definition } from "./${config.tagName}.definition.js";
+
+${config.className}.compose(definition);`; 

packages/fast-cli/src/components/progress-ring/template/fast.add-component.json

@@ -0,0 +1,8 @@
+{
+    "packageJson": {
+        "dependencies": {
+            "@microsoft/adaptive-ui": "../adaptive-ui",
+            "@microsoft/fast-foundation": "^2.46.2"
+        }
+    }
+} 

packages/fast-cli/src/components/progress-ring/template/fixture.ts

@@ -0,0 +1,37 @@
+import type { ComponentTemplateConfig } from "../../../utilities/template";
+
+export default (config: ComponentTemplateConfig): string =>
+`<h1>${config.className}</h1>
+<h2>Default</h2>
+<div style="width: 300px;">
+    <${config.tagName} min="0" max="100" value="75"></${config.tagName}>
+    <${config.tagName}></${config.tagName}>
+</div>
+<h2>Paused</h2>
+<div style="width: 300px;">
+    <${config.tagName} paused="true" min="0" max="100" value="75"></${config.tagName}>
+    <${config.tagName} paused="true"></${config.tagName}>
+</div>
+<h2>Custom Sizes</h2>
+<div style="width: 300px;">
+    <${config.tagName} min="0" max="100" value="20"></${config.tagName}>
+    <${config.tagName} min="0" max="100" value="40" style="height: 8px;"></${config.tagName}>
+    <${config.tagName} min="0" max="100" value="60" style="height: 12px;"></${config.tagName}>
+    <${config.tagName} min="0" max="100" value="80" style="height: 16px;"></${config.tagName}>
+    <${config.tagName} min="0" max="100" value="100" style="height: 20px;"></${config.tagName}>
+    <${config.tagName}></${config.tagName}>
+    <${config.tagName} style="height: 8px;"></${config.tagName}>
+    <${config.tagName} style="height: 12px;"></${config.tagName}>
+    <${config.tagName} style="height: 16px;"></${config.tagName}>
+    <${config.tagName} style="height: 20px;"></${config.tagName}>
+</div>
+
+<h2>vary min/max</h2>
+<div style="width: 300px;">
+    <${config.tagName} min="2" max="6" value="2"></${config.tagName}>
+    <${config.tagName} min="2" max="6" value="3"></${config.tagName}>
+    <${config.tagName} min="2" max="6" value="4"></${config.tagName}>
+    <${config.tagName} min="2" max="6" value="5"></${config.tagName}>
+    <${config.tagName} min="2" max="6" value="6"></${config.tagName}>
+</div>
+`;

packages/fast-cli/src/components/progress-ring/template/index.ts

@@ -0,0 +1,2 @@
+// Import added to include the json file in the transpiled template
+import "./fast.add-component.json";