Added the calendar component (#65)

# Pull Request

## 📖 Description

<!--- Provide some background and a description of your work. -->
This change adds the calendar 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 components for #31

change/@microsoft-fast-cli-6f53357a-c211-4ef4-aa2a-9a4b938dd5af.json

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

packages/fast-cli/src/components/calendar/README.md

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

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

@@ -0,0 +1,33 @@
+import { expect, test } from "@playwright/test";
+import { execSync } from "child_process";
+import {
+    expectedGeneratedComponentTemplateFiles,
+    setupComponent,
+    teardown,
+    getGeneratedComponentFiles,
+    getTempDir,
+    getTempComponentDir,
+} from "../../test/helpers.js";
+
+const uuid: string = "calendar";
+const tempDir: string = getTempDir(uuid);
+const tempComponentDir: string = getTempComponentDir(uuid);
+
+test.describe(`CLI add-foundation-component ${uuid}`, () => {
+    test.beforeAll(() => {
+        setupComponent(uuid, tempDir, tempComponentDir);
+    });
+    test.afterAll(() => {
+        teardown(tempDir, tempComponentDir);
+    });
+    test("should copy files from the template", () => {
+        expect(getGeneratedComponentFiles(tempDir)).toEqual(expectedGeneratedComponentTemplateFiles);
+    });
+    test("should be able to run the build", () => {
+        expect(
+            () => {
+                execSync(`cd ${tempDir} && npm run build`);
+            }
+        ).not.toThrow();
+    });
+});

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

@@ -0,0 +1,8 @@
+import type { ComponentTemplateConfig } from "../../../utilities/template";
+
+export default (config: ComponentTemplateConfig): string => `
+# ${config.className}
+
+An implementation of a calendar as a web-component.
+
+For more information on the building blocks used to create this component, please refer to https://www.fast.design/docs/components/calendar`;

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

@@ -0,0 +1,13 @@
+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";
+import { CalendarTitleTemplate } from "@microsoft/fast-foundation";
+
+export const definition = {
+    baseName: "${config.tagName}",
+    template,
+    styles,
+    title: CalendarTitleTemplate,
+};`;

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

@@ -0,0 +1,25 @@
+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/calendar/template/component.stories.ts

@@ -0,0 +1,12 @@
+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}: () => "*.html" = () => Template;
+`;

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

@@ -0,0 +1,143 @@
+import type { ComponentTemplateConfig } from "../../../utilities/template";
+
+export default (config: ComponentTemplateConfig): string =>
+`import { css, ElementStyles } from "@microsoft/fast-element";
+import {
+    disabledCursor,
+    display,
+    FoundationElementTemplate,
+    forcedColorsStylesheetBehavior
+} from "@microsoft/fast-foundation";
+import { SystemColors } from "@microsoft/fast-web-utilities";
+import {
+    accentForegroundActive,
+    bodyFont,
+    designUnit,
+    disabledOpacity,
+    foregroundOnAccentActive,
+    heightNumber,
+    neutralFillRest,
+    neutralForegroundRest,
+    typeRampBaseFontSize,
+    typeRampBaseLineHeight,
+    typeRampPlus3FontSize,
+    typeRampPlus3LineHeight,
+} from "@microsoft/adaptive-ui";
+
+/**
+ * Styles for ${config.className}
+ * @public
+ */
+export const styles: FoundationElementTemplate<ElementStyles> = (
+    context,
+    definition
+) =>
+    css\`
+        \${display("block")} :host {
+            --cell-border: none;
+            --cell-height: calc(\${heightNumber} * 1px);
+            --selected-day-outline: 1px solid \${accentForegroundActive};
+            --selected-day-color: \${accentForegroundActive};
+            --selected-day-background: \${neutralFillRest};
+            --cell-padding: calc(\${designUnit} * 1px);
+            --disabled-day-opacity: \${disabledOpacity};
+            --inactive-day-opacity: \${disabledOpacity};
+            font-family: \${bodyFont};
+            font-size: \${typeRampBaseFontSize};
+            line-height: \${typeRampBaseLineHeight};
+            color: \${neutralForegroundRest};
+        }
+        .title {
+            font-size: \${typeRampPlus3FontSize};
+            line-height: \${typeRampPlus3LineHeight};
+            padding: var(--cell-padding);
+            text-align: center;
+        }
+        .week-days,
+        .week {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            border-left: var(--cell-border, none);
+            border-bottom: none;
+            padding: 0;
+        }
+        .interact .week {
+            grid-gap: calc(\${designUnit} * 1px);
+            margin-top: calc(\${designUnit} * 1px);
+        }
+        .day,
+        .week-day {
+            border-bottom: var(--cell-border);
+            border-right: var(--cell-border);
+            padding: var(--cell-padding);
+        }
+        .week-day {
+            text-align: center;
+            border-radius: 0;
+            border-top: var(--cell-border);
+        }
+        .day {
+            box-sizing: border-box;
+            vertical-align: top;
+            outline-offset: -1px;
+            line-height: var(--cell-line-height);
+            white-space: normal;
+        }
+        .interact .day {
+            background: \${neutralFillRest};
+            cursor: pointer;
+        }
+        .day.inactive {
+            background: var(--inactive-day-background);
+            color: var(--inactive-day-color);
+            opacity: var(--inactive-day-opacity);
+            outline: var(--inactive-day-outline);
+        }
+        .day.disabled {
+            background: var(--disabled-day-background);
+            color: var(--disabled-day-color);
+            cursor: \${disabledCursor};
+            opacity: var(--disabled-day-opacity);
+            outline: var(--disabled-day-outline);
+        }
+        .day.selected {
+            color: var(--selected-day-color);
+            background: var(--selected-day-background);
+            outline: var(--selected-day-outline);
+        }
+        .date {
+            padding: var(--cell-padding);
+            text-align: center;
+        }
+        .interact .today,
+        .today {
+            color: \${foregroundOnAccentActive};
+            background: \${accentForegroundActive};
+        }
+        .today.inactive .date {
+            background: transparent;
+            color: inherit;
+            width: auto;
+        }
+        \`.withBehaviors(
+            forcedColorsStylesheetBehavior(
+                css\`
+                    :host {
+                        --selected-day-outline: 1px solid \${SystemColors.Highlight};
+                    }
+                    .day,
+                    .week-day {
+                        background: \${SystemColors.Canvas};
+                        color: \${SystemColors.CanvasText};
+                        fill: currentcolor;
+                    }
+                    .day.selected {
+                        color: \${SystemColors.Highlight};
+                    }
+                    .today .date {
+                        background: \${SystemColors.Highlight};
+                        color: \${SystemColors.HighlightText};
+                    }
+                \`
+            )
+        );`

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

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

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

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

packages/fast-cli/src/components/calendar/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";
+
+export const ${config.definitionName} = ${config.className}.compose(definition);`;

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

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