Added the flipper component (#47)

# Pull Request

## 📖 Description

<!--- Provide some background and a description of your work. -->
Added the foundation flipper 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-b25f4971-286d-4ac0-b0cb-504008479201.json

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

packages/fast-cli/src/components/flipper/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/flipper/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 = "flipper";
+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/flipper/template/README.ts

@@ -0,0 +1,7 @@
+import type { ComponentTemplateConfig } from "../../../utilities/template";
+
+export default (config: ComponentTemplateConfig): string => `
+# ${config.className}
+The flipper component is most often used to page through blocks of content or collections of UI elements.
+
+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/flipper/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/flipper/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/flipper/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/flipper/template/component.styles.ts

@@ -0,0 +1,160 @@
+import type { ComponentTemplateConfig } from "../../../utilities/template";
+
+export default (config: ComponentTemplateConfig): string =>
+`import { css, ElementStyles } from "@microsoft/fast-element";
+import {
+    disabledCursor,
+    display,
+    FlipperOptions,
+    focusVisible,
+    forcedColorsStylesheetBehavior,
+    FoundationElementTemplate,
+} from "@microsoft/fast-foundation";
+import { SystemColors } from "@microsoft/fast-web-utilities";
+import {
+    accentFillActive,
+    accentFillHover,
+    accentFillRest,
+    disabledOpacity,
+    focusStrokeInner,
+    focusStrokeOuter,
+    focusStrokeWidth,
+    foregroundOnAccentActive,
+    foregroundOnAccentHover,
+    foregroundOnAccentRest,
+    heightNumber,
+    neutralFillStealthRest,
+    neutralForegroundRest,
+    neutralStrokeRest,
+    strokeWidth,
+} from "@microsoft/adaptive-ui";
+
+/**
+ * Styles for ${config.className}
+ * @public
+ */
+export const styles: FoundationElementTemplate<ElementStyles> = (
+    context,
+    definition
+) =>
+css\`
+    \${display("inline-flex")} :host {
+        width: calc(\${heightNumber} * 1px);
+        height: calc(\${heightNumber} * 1px);
+        justify-content: center;
+        align-items: center;
+        margin: 0;
+        position: relative;
+        fill: currentcolor;
+        color: \${foregroundOnAccentRest};
+        background: transparent;
+        outline: none;
+        border: none;
+        padding: 0;
+    }
+    :host::before {
+        content: "";
+        background: \${accentFillRest};
+        border: calc(\${strokeWidth} * 1px) solid \${accentFillRest};
+        border-radius: 50%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        transition: all 0.1s ease-in-out;
+    }
+    .next,
+    .previous {
+        position: relative;
+        /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
+        width: 16px;
+        height: 16px;
+        display: grid;
+    }
+    :host([disabled]) {
+        opacity: \${disabledOpacity};
+        cursor: \${disabledCursor};
+        fill: currentcolor;
+        color: \${neutralForegroundRest};
+        pointer-events: none;
+    }
+    :host([disabled])::before,
+    :host([disabled]:hover)::before,
+    :host([disabled]:active)::before {
+        background: \${neutralFillStealthRest};
+        border-color: \${neutralStrokeRest};
+    }
+    :host(:hover) {
+        color: \${foregroundOnAccentHover};
+    }
+    :host(:hover)::before {
+        background: \${accentFillHover};
+        border-color: \${accentFillHover};
+    }
+    :host(:active) {
+        color: \${foregroundOnAccentActive};
+    }
+    :host(:active)::before {
+        background: \${accentFillActive};
+        border-color: \${accentFillActive};
+    }
+    :host(:\${focusVisible}) {
+        outline: none;
+    }
+    :host(:\${focusVisible})::before {
+        box-shadow: 0 0 0 calc((\${focusStrokeWidth} - \${strokeWidth}) * 1px) \${focusStrokeOuter} inset,
+            0 0 0 calc((\${focusStrokeWidth} + \${strokeWidth}) * 1px) \${focusStrokeInner} inset;
+        border-color: \${focusStrokeOuter};
+    }
+    :host::-moz-focus-inner {
+        border: 0;
+    }
+    \`.withBehaviors(
+        forcedColorsStylesheetBehavior(
+            css\`
+            :host {
+                background: \${SystemColors.Canvas};
+            }
+            :host .next,
+            :host .previous {
+                color: \${SystemColors.ButtonText};
+                fill: currentcolor;
+            }
+            :host::before {
+                background: \${SystemColors.Canvas};
+                border-color: \${SystemColors.ButtonText};
+            }
+            :host(:hover)::before {
+                forced-color-adjust: none;
+                background: \${SystemColors.Highlight};
+                border-color: \${SystemColors.ButtonText};
+                opacity: 1;
+            }
+            :host(:hover) .next,
+            :host(:hover) .previous  {
+                forced-color-adjust: none;
+                color: \${SystemColors.HighlightText};
+                fill: currentcolor;
+            }
+            :host([disabled]) {
+                opacity: 1;
+            }
+            :host([disabled])::before,
+            :host([disabled]:hover)::before,
+            :host([disabled]) .next,
+            :host([disabled]) .previous {
+                forced-color-adjust: none;
+                background: \${SystemColors.Canvas};
+                border-color: \${SystemColors.GrayText};
+                color: \${SystemColors.GrayText};
+                fill: \${SystemColors.GrayText};
+            }
+            :host(:\${focusVisible})::before {
+                forced-color-adjust: none;
+                border-color: \${SystemColors.Highlight};
+                box-shadow: 0 0 0 calc((\${focusStrokeWidth} - \${strokeWidth}) * 1px) \${SystemColors.Highlight} inset;
+            }
+        \`
+        )
+    );`;

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

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

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

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

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

@@ -0,0 +1,49 @@
+import type { ComponentTemplateConfig } from "../../../utilities/template";
+
+export default (config: ComponentTemplateConfig): string =>
+`<h1>${config.className}</h1>
+<h2>Default</h2>
+<${config.tagName}></${config.tagName}>
+
+<h2>Previous</h2>
+<${config.tagName} direction="previous"></${config.tagName}>
+
+<h2>Previous with slotted content</h2>
+<${config.tagName} direction="previous">
+    <svg
+        slot="previous"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
+        />
+    </svg>
+</${config.tagName}>
+
+<h2>Next</h2>
+<${config.tagName} direction="next"></${config.tagName}>
+
+<h2>Next with slotted content</h2>
+<${config.tagName} direction="next">
+    <svg
+        slot="next"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
+        />
+    </svg>
+</${config.tagName}>
+
+<h2>With aria-hidden set to false</h2>
+<${config.tagName} aria-hidden="false"></${config.tagName}>
+
+<h2>Disabled</h2>
+<${config.tagName} disabled></${config.tagName}>
+`;

packages/fast-cli/src/components/flipper/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

@@ -5,6 +5,7 @@ export const availableTemplates = [
     "checkbox",
     "dialog",
     "disclosure",
+    "flipper",
     "number-field",
     "progress",
     "progress-ring",