Added badge foundation component (#42)

# Pull Request

## 📖 Description

<!--- Provide some background and a description of your work. -->
This change does the following:
- Standardizes files used to be dot notation for example `fast.config.json` instead of `fastconfig.json`, this is more widely practiced and lets the other files needed be more obviously `fast.<command>.json`
- Adds the Badge component
- Enables dependencies to be added for each component with their versions

### 🎫 Issues

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

## 👩‍💻 Reviewer Notes

<!---
Provide some notes for reviewers to help them provide targeted feedback and testing.
-->
Note that as issues come up (needing dependencies, needing to install multiple components together in a future PR, this logic will be added).

## ✅ 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

STYLE_GUIDE.md

@@ -50,6 +50,12 @@ myFunction(): void {
 }
 ```
 
+### Files needed for commands
+
+Files that are generated and/or needed for the CLI to function based on a command should follow the naming convention `fast.<command>.json`.
+
+Example: `fast.config.json`
+
 ### Web Component Attributes
 
 Web component attributes should be camelCased as properties and be dash separated as the HTML attribute.
@@ -86,3 +92,7 @@ Examples:
 ```
 
 Note that there is only ever a single block present, and optionally a single element and/or modifier. There are never multiple blocks, elements, or modifiers which should keep CSS class names short and readable.
+
+### Exports
+
+Default exports should be avoided, use named exports wherever possible.

change/@microsoft-cfp-template-f4488cb9-ed66-47aa-9fb0-cee70ca58a94.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Updated the config/init files to the new fast.<command>.json naming convention",
+  "packageName": "@microsoft/cfp-template",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@microsoft-fast-cli-4c645824-cad2-4055-a66f-1ec72fb02154.json

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

packages/fast-cli/package.json

@@ -32,6 +32,7 @@
     },
     "homepage": "https://github.com/Microsoft/fast#readme",
     "dependencies": {
+        "@microsoft/adaptive-ui": "^0.1.0",
         "@microsoft/fast-foundation": "^2.44.0",
         "commander": "^9.0.0",
         "cross-spawn": "^7.0.3",

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

@@ -60,6 +60,7 @@ function setup() {
         "fast:add-design-system": `fast add-design-system -p test -s open`,
         "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`,
     };
     fs.writeFileSync(path.resolve(tempDir, "package.json"), JSON.stringify(packageJson, null, 2));
 }
@@ -95,7 +96,7 @@ test.describe("CLI", () => {
                 })
             );
             const configFilePackageJson = JSON.parse(
-                fs.readFileSync(path.resolve(tempDir, "fastinit.json"), {
+                fs.readFileSync(path.resolve(tempDir, "fast.init.json"), {
                     encoding: "utf8",
                 })
             ).packageJson;
@@ -108,14 +109,14 @@ test.describe("CLI", () => {
                 }
             }
         });
-        test("should create a fastconfig file with contents from the fast init", () => {
+        test("should create a fast.config file with contents from the fast init", () => {
             const fastConfigFile = JSON.parse(
-                fs.readFileSync(path.resolve(tempDir, "fastconfig.json"), {
+                fs.readFileSync(path.resolve(tempDir, "fast.config.json"), {
                     encoding: "utf8",
                 })
             );
             const configFilePackageJson = JSON.parse(
-                fs.readFileSync(path.resolve(tempDir, "fastinit.json"), {
+                fs.readFileSync(path.resolve(tempDir, "fast.init.json"), {
                     encoding: "utf8",
                 })
             ).fastConfig;
@@ -151,18 +152,18 @@ test.describe("CLI", () => {
         test.afterAll(() => {
             teardown();
         });
-        test("should create a fastconfig.json file", () => {
+        test("should create a fast.config.json file", () => {
             expect(() => {
                 JSON.parse(
-                    fs.readFileSync(path.resolve(tempDir, "fastconfig.json"), {
+                    fs.readFileSync(path.resolve(tempDir, "fast.config.json"), {
                         encoding: "utf8",
                     })
                 )
             }).not.toThrow();
         });
         test("should contain a custom component path", () => {
             const config = JSON.parse(
-                fs.readFileSync(path.resolve(tempDir, "fastconfig.json"), {
+                fs.readFileSync(path.resolve(tempDir, "fast.config.json"), {
                     encoding: "utf8",
                 })
             );
@@ -177,15 +178,15 @@ test.describe("CLI", () => {
         test.afterAll(() => {
             teardown();
         });
-        test("should throw if there is no fastconfig.json file", () => {
+        test("should throw if there is no fast.config.json file", () => {
             expect(() => {
                 execSync(`cd ${tempDir} && npm run fast:add-design-system`);
             }).toThrow();
         });
-        test("should throw if the fastconfig.json file does not contain a component path", () => {
+        test("should throw if the fast.config.json file does not contain a component path", () => {
             execSync(`cd ${tempDir} && npm run fast:config`);
 
-            fs.writeFileSync(path.resolve(tempDir, "fastconfig.json"), "{}");
+            fs.writeFileSync(path.resolve(tempDir, "fast.config.json"), "{}");
 
             expect(() => {
                 execSync(`cd ${tempDir} && npm run fast:add-design-system`);
@@ -258,7 +259,50 @@ test.describe("CLI", () => {
             test.afterAll(() => {
                 teardown();
             });
-            test("should copy files from the blank template", () => {
+            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();
+            });
+        });
+        test.describe("badge", () => {
+            test.beforeAll(() => {
+                setup();
+                execSync(`cd ${tempDir} && npm run fast:init`);
+                setup();
+                execSync(`cd ${tempDir} && npm run fast:add-foundation-component:badge`);
+            });
+            test.afterAll(() => {
+                teardown();
+            });
+            test("should copy files from the template", () => {
                 let files: Array<string> = [];
 
                 function testGeneratedFiles(folderName: string) {