Added some missing class logic to components that have deviated from …

…foundation (#60)

# Pull Request

## 📖 Description

<!--- Provide some background and a description of your work. -->
After doing some re-assessment of added foundation components it was found that a few were missing additional class logic, seemingly related to specific styling, and a few had extra elements baked into the definition.

### 🎫 Issues

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

## ✅ Checklist

### General

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

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

change/@microsoft-fast-cli-ead87ab3-aaf6-41a4-b224-54bc6e257a28.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Added some missing class logic to components that have deviated from foundation",
+  "packageName": "@microsoft/fast-cli",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

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

@@ -1,8 +1,27 @@
 import type { ComponentTemplateConfig } from "../../../utilities/template";
 
 export default (config: ComponentTemplateConfig): string =>
-`import { Card } from "@microsoft/fast-foundation";
+`import { composedParent, Card } from "@microsoft/fast-foundation";
+import type { Swatch } from "@microsoft/adaptive-ui/dist/dts/color/swatch.d.js"
+import { fillColor, neutralFillLayerRecipe } from "@microsoft/adaptive-ui";
+
 /**
  * A class derived from the Card foundation component
  */
-export class ${config.className} extends Card {};` 
+export class ${config.className} extends Card {
+    connectedCallback() {
+        super.connectedCallback();
+
+        const parent = composedParent(this);
+
+        if (parent) {
+            fillColor.setValueFor(
+                this,
+                (target: HTMLElement): Swatch =>
+                    neutralFillLayerRecipe
+                        .getValueFor(target)
+                        .evaluate(target, fillColor.getValueFor(parent))
+            );
+        }
+    }
+};` 

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

@@ -2,8 +2,72 @@ import type { ComponentTemplateConfig } from "../../../utilities/template";
 
 export default (config: ComponentTemplateConfig): string =>
 `import { Disclosure } from "@microsoft/fast-foundation";
+import { attr } from "@microsoft/fast-element";
+
+/**
+ * Types of disclosure appearance.
+ * @public
+ */
+export type DisclosureAppearance = "accent" | "lightweight";
 
 /**
  * A class derived from the Disclosure foundation component
  */
-export class ${config.className} extends Disclosure {};`
+export class ${config.className} extends Disclosure {
+    /**
+     * Disclosure default height
+     */
+    private height: number = 0;
+    /**
+     * Disclosure height after it's expanded
+     */
+    private totalHeight: number = 0;
+
+    public connectedCallback(): void {
+        super.connectedCallback();
+        if (!this.appearance) {
+            this.appearance = "accent";
+        }
+    }
+
+    /**
+     * The appearance the disclosure should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    @attr
+    public appearance?: DisclosureAppearance;
+
+    /**
+     * Set disclosure height while transitioning
+     * @override
+     */
+    protected onToggle() {
+        super.onToggle();
+        this.details.style.setProperty("height", \`\${this.disclosureHeight}px\`);
+    }
+
+    /**
+     * Calculate disclosure height before and after expanded
+     * @override
+     */
+    protected setup() {
+        super.setup();
+
+        const getCurrentHeight = () => this.details.getBoundingClientRect().height;
+        this.show();
+        this.totalHeight = getCurrentHeight();
+        this.hide();
+        this.height = getCurrentHeight();
+
+        if (this.expanded) {
+            this.show();
+        }
+    }
+
+    get disclosureHeight(): number {
+        return this.expanded ? this.totalHeight : this.height;
+    }
+};`

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

@@ -8,4 +8,18 @@ export const definition = {
     baseName: "${config.tagName}",
     template,
     styles,
-}`; 
+    next: /* html */ \`
+        <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M4.023 15.273L11.29 8 4.023.727l.704-.704L12.71 8l-7.984 7.977-.704-.704z"
+            />
+        </svg>
+    \`,
+    previous: /* html */ \`
+        <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M11.273 15.977L3.29 8 11.273.023l.704.704L4.71 8l7.266 7.273-.704.704z"
+            />
+        </svg>
+    \`,
+}`;

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

@@ -8,4 +8,13 @@ export const definition = {
     baseName: "${config.tagName}",
     template,
     styles,
+    shadowOptions: {
+        delegatesFocus: true,
+    },
+    stepDownGlyph: /* html */ \`
+        <span class="step-down-glyph" part="step-down-glyph"></span>
+    \`,
+    stepUpGlyph: /* html */ \`
+        <span class="step-up-glyph" part="step-up-glyph"></span>
+    \`,
 }`; 

packages/fast-cli/src/components/number-field/template/component.ts

@@ -2,7 +2,25 @@ import type { ComponentTemplateConfig } from "../../../utilities/template";
 
 export default (config: ComponentTemplateConfig): string =>
 `import { NumberField } from "@microsoft/fast-foundation";
+import { attr } from "@microsoft/fast-element";
+
+/**
+ * Number field appearances
+ * @public
+ */
+export type NumberFieldAppearance = "filled" | "outline";
+
 /**
  * A class derived from the NumberField foundation component
  */
-export class ${config.className} extends NumberField {};` 
+export class ${config.className} extends NumberField {
+    /**
+     * The appearance of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    @attr
+    public appearance: NumberFieldAppearance = "outline";
+};` 

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

@@ -8,4 +8,7 @@ export const definition = {
     baseName: "${config.tagName}",
     template,
     styles,
+    shadowOptions: {
+        delegatesFocus: true,
+    },
 };`;

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

@@ -2,8 +2,25 @@ import type { ComponentTemplateConfig } from "../../../utilities/template";
 
 export default (config: ComponentTemplateConfig): string =>
 `import { Search } from "@microsoft/fast-foundation";
+import { attr } from "@microsoft/fast-element";
+
+/**
+ * Search appearances
+ * @public
+ */
+export type SearchAppearance = "filled" | "outline";
 
 /**
  * A class derived from the Search foundation component
  */
-export class ${config.className} extends Search {};`
+export class ${config.className} extends Search {
+    /**
+     * The appearance of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    @attr
+    public appearance: SearchAppearance = "outline";
+};`