feat: add pivot msft component (#1385)

* started work on Pivot

* more pivot work

* started work on Pivot component

* more work on pivot

* updated pivot control

* removed data from schema

* more pivot work

* added canUseDom

* more updates

* add: pivot component

* fixed spelling error

* fixed test description

* addressed PR comments

* moved to dom re renderings to be based on state

* implemented new focus state

* updated render props to match new schema layout

* addressed PR comments

* updated styling values

* missing dependency reoved unsused refrences

* moved export of Managed Classes

* removed clas name debugging

* code clean up and refactoring

* addressed more PR comments

* changed extension of prop file

* adressed className naming

Author: eljefe223

packages/fast-components-class-name-contracts-msft/src/index.ts

@@ -11,6 +11,7 @@ export * from "./heading";
 export * from "./managed-classes";
 export * from "./metatext";
 export * from "./paragraph";
+export * from "./pivot";
 export * from "./progress";
 export * from "./subheading";
 export * from "./text-action";

packages/fast-components-class-name-contracts-msft/src/pivot/index.ts

@@ -0,0 +1,64 @@
+/**
+ * The class name contract for the pivot component
+ */
+export interface PivotClassNameContract {
+    /**
+     * The root of the pivot component
+     */
+    pivot?: string;
+
+    /**
+     * The active pivot indicator
+     */
+    pivot_activeIndicator?: string;
+
+    /**
+     * The collection of pivot items
+     */
+    pivot_tabList?: string;
+
+    /**
+     * The pivot item
+     */
+    pivot_tab?: string;
+
+    /**
+     * The active pivot item
+     */
+    pivot_tab__active?: string;
+
+    /**
+     * The pivot tab content
+     */
+    pivot_tabContent?: string;
+
+    /**
+     * The collection of tab panels
+     */
+    pivot_tabPanels?: string;
+
+    /**
+     * The previous panel animation
+     */
+    pivot_tabPanels__animatePrevious?: string;
+
+    /**
+     * The next tab panel animation
+     */
+    pivot_tabPanels__animateNext?: string;
+
+    /**
+     * The tab panel
+     */
+    pivot_tabPanel?: string;
+
+    /**
+     * The hidden tab panel
+     */
+    pivot_tabPanel__hidden?: string;
+
+    /**
+     * The tab panel content
+     */
+    pivot_tabPanelContent?: string;
+}

packages/fast-components-react-msft/app/app.tsx

@@ -36,6 +36,8 @@ import reactSVGElementExamples from "./components/svg-svg-element-child-option";
 import carouselHeroContentExamples from "./components/carousel-hero-content-child-options";
 import carouselDarkImageContentExamples from "./components/carousel-dark-image-content-child-options";
 import carouselLightImageContentExamples from "./components/carousel-light-image-content-child-options";
+import pivotItemContentExamples from "./components/pivot-item-content-child-options";
+import pivotItemTabExamples from "./components/pivot-item-tab-child-options";
 import { Label } from "../src/label";
 
 /* tslint:disable-next-line */
@@ -47,6 +49,8 @@ const formChildOptions: FormChildOption[] = [
     carouselHeroContentExamples,
     carouselDarkImageContentExamples,
     carouselLightImageContentExamples,
+    pivotItemContentExamples,
+    pivotItemTabExamples,
 ].concat(formChildFromExamplesFactory(examples));
 
 const formPlugins: Array<Plugin<PluginProps>> = [
@@ -58,6 +62,8 @@ const formPlugins: Array<Plugin<PluginProps>> = [
             "@microsoft/fast-components-react-msft/button/beforeContent",
             "@microsoft/fast-components-react-msft/button/afterContent",
             "@microsoft/fast-components-react-msft/carousel/items/content",
+            "@microsoft/fast-components-react-msft/pivot/items/content",
+            "@microsoft/fast-components-react-msft/pivot/items/tab",
             "@microsoft/fast-components-react-msft/text-action/beforeGlyph",
             "@microsoft/fast-components-react-msft/text-action/afterGlyph",
         ],

packages/fast-components-react-msft/app/components/pivot-item-content-child-options.tsx

@@ -0,0 +1,7 @@
+import PivotItemContentSchema from "./pivot-item-content.schema.json";
+import PivotItemContent from "./pivot-item-content";
+export default {
+    name: "Pivot item content",
+    schema: PivotItemContentSchema,
+    component: PivotItemContent,
+};

packages/fast-components-react-msft/app/components/pivot-item-content.schema.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "http://json-schema.org/schema#",
+    "title": "Pivot Item Content",
+    "description": "A pivot item content component's schema definition.",
+    "id": "pivot-item-content",
+    "type": "object",
+    "properties": {},
+    "reactProperties": {
+        "children": {
+            "title": "Children",
+            "type": "children",
+            "defaults": [
+                "text"
+            ]
+        }
+    }
+}

packages/fast-components-react-msft/app/components/pivot-item-content.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+export interface PivotItemContentProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+
+/**
+ * A stand-in a mock pivot content
+ */
+export default class PivotItemContent extends React.Component<PivotItemContentProps, {}> {
+    public render(): React.ReactNode {
+        return <div className={this.props.className}>{this.props.children}</div>;
+    }
+}

packages/fast-components-react-msft/app/components/pivot-item-tab-child-options.tsx

@@ -0,0 +1,7 @@
+import PivotItemTabSchema from "./pivot-item-tab.schema.json";
+import PivotItemTab from "./pivot-item-tab";
+export default {
+    name: "Pivot item tab",
+    schema: PivotItemTabSchema,
+    component: PivotItemTab,
+};

packages/fast-components-react-msft/app/components/pivot-item-tab.schema.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "http://json-schema.org/schema#",
+    "title": "Pivot Item Tab",
+    "description": "A pivot item tab component's schema definition.",
+    "id": "pivot-item-tab",
+    "type": "object",
+    "properties": {},
+    "reactProperties": {
+        "children": {
+            "title": "Children",
+            "type": "children",
+            "defaults": [
+                "text"
+            ]
+        }
+    }
+}

packages/fast-components-react-msft/app/components/pivot-item-tab.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+export interface PivotItemTabProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+
+/**
+ * A stand-in a mock pivot tab
+ */
+export default class PivotItemTab extends React.Component<PivotItemTabProps, {}> {
+    public render(): React.ReactNode {
+        return <div className={this.props.className}>{this.props.children}</div>;
+    }
+}

packages/fast-components-react-msft/app/examples.ts

@@ -64,6 +64,9 @@ export { NumberFieldExamples };
 import ParagraphExamples from "../src/paragraph/examples.data";
 export { ParagraphExamples };
 
+import PivotExamples from "../src/pivot/examples.data";
+export { PivotExamples };
+
 import ProgressExamples from "../src/progress/examples.data";
 export { ProgressExamples };