Added the dialog component (#44)

# Pull Request

## 📖 Description

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

### 🎫 Issues

<!---
List and link relevant issues here using the keyword "closes"
if this PR will close an issue, eg. closes #411
-->
Continues 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-99144116-1d74-4ca3-a511-893a70c2171e.json

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

packages/fast-cli/src/cli.spec.ts

@@ -61,6 +61,7 @@ function setup() {
         "fast:add-component:template": `fast add-component -n test-component -t ${path.resolve(dirname, "../temp-component")}`,
         "fast:add-foundation-component:blank": `fast add-foundation-component -n test-component -t blank`,
         "fast:add-foundation-component:badge": `fast add-foundation-component -n test-component -t badge`,
+        "fast:add-foundation-component:dialog": `fast add-foundation-component -n test-component -t dialog`,
     };
     fs.writeFileSync(path.resolve(tempDir, "package.json"), JSON.stringify(packageJson, null, 2));
 }
@@ -335,5 +336,48 @@ test.describe("CLI", () => {
                 ).not.toThrow();
             });
         });
+        test.describe("dialog", () => {
+            test.beforeAll(() => {
+                setup();
+                execSync(`cd ${tempDir} && npm run fast:init`);
+                setup();
+                execSync(`cd ${tempDir} && npm run fast:add-foundation-component:dialog`);
+            });
+            test.afterAll(() => {
+                teardown();
+            });
+            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/dialog/README.md

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

packages/fast-cli/src/components/dialog/template/README.ts

@@ -0,0 +1,7 @@
+import type { ComponentTemplateConfig } from "../../../utilities/template";
+
+export default (config: ComponentTemplateConfig): string => `
+# ${config.className}
+A web component implementation of a [dialog](https://w3c.github.io/aria-practices/#dialog_modal).
+
+For more information on the building blocks used to create this component, please refer to https://www.fast.design/docs/components/card`;

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

@@ -0,0 +1,11 @@
+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,
+}`; 

packages/fast-cli/src/components/dialog/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/dialog/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/dialog/template/component.styles.ts

@@ -0,0 +1,56 @@
+import type { ComponentTemplateConfig } from "../../../utilities/template";
+
+export default (config: ComponentTemplateConfig): string =>
+`import { css, ElementStyles } from "@microsoft/fast-element";
+import type { FoundationElementTemplate } from "@microsoft/fast-foundation";
+import { controlCornerRadius, elevation, fillColor, strokeWidth } from "@microsoft/adaptive-ui";
+
+/**
+ * Styles for ${config.className}
+ * @public
+ */
+export const styles: FoundationElementTemplate<ElementStyles> = (
+    context,
+    definition
+) =>
+    css\`
+        :host([hidden]) {
+            display: none;
+        }
+        :host {
+            --elevation: 14;
+            --${config.tagName}-height: 480px;
+            --${config.tagName}-width: 640px;
+            display: block;
+        }
+        .overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.3);
+            touch-action: none;
+        }
+        .positioning-region {
+            display: flex;
+            justify-content: center;
+            position: fixed;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            overflow: auto;
+        }
+        .control {
+            \${elevation}
+            margin-top: auto;
+            margin-bottom: auto;
+            width: var(--${config.tagName}-width);
+            height: var(--${config.tagName}-height);
+            background-color: \${fillColor};
+            z-index: 1;
+            border-radius: calc(\${controlCornerRadius} * 1px);
+            border: calc(\${strokeWidth} * 1px) solid transparent;
+        }
+    \`;`;

packages/fast-cli/src/components/dialog/template/component.template.ts

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

packages/fast-cli/src/components/dialog/template/component.ts

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

packages/fast-cli/src/components/dialog/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/dialog/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/dialog/template/fixture.ts

@@ -0,0 +1,20 @@
+import type { ComponentTemplateConfig } from "../../../utilities/template";
+
+export default (config: ComponentTemplateConfig): string =>
+`<button id="button1">
+Show ${config.className}
+</button>
+<p>tab queue detected automatically</p>
+
+<${config.tagName}
+    id="dialog1"
+    aria-label="Simple dialog"
+    modal="true"
+    trap-focus="true"
+    hidden="true"
+>
+<h2>Dialog queue detected automatically</h2>
+<button>Button</button>
+<p>(esc to close)</p>
+</${config.tagName}>
+`;

packages/fast-cli/src/components/dialog/template/index.ts

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

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

@@ -1,4 +1,5 @@
 export const availableTemplates = [
     "badge",
-    "blank"
+    "blank",
+    "dialog"
 ]