feat: add fast-components-msft as a new package (#3096)

* initial work to create fast-components-msft

* add styles packages for patterns

* add msft anchor

* add msft button

* add msft badge - outstanding issues

* add msft card

* add msft checkbox

* add msft dialog

* add msft divider

* add msft flipper

* add msft progress - do we want to narrow support to align with guidance?

* add msft radio

* add MSFT radio group

* add msft slider and slider-label

* add msft switch

* add msft tabs - need to ensure alignment of tab panel with tabs

* add msft text area

* add msft text field

* export all components from root

* fix eslint errors

* update imports from fast-components

* add .js extension to anything distributed

* update readme to include install instructions

* update prefix to align with fast

* update package.json description

* update tsconfig

* add dependency for fast-components-styles-msft

* update design system provider to use MSFT design system

* remove js extensions for the time being

* update imports for fast-foundation

* update behavior imports to correct internal path

* update pathing for forcedColors behavior

* fix order of imports

* update system-colors path

* update imports for  shared utils added to foundation

* fix design system signature and update to new textarea api with default slot for label

* remove unused behavior and fix color on text field

* update design system values and remove unused vars

* fix text field focus bug

packages/web-components/fast-components-msft/.eslintignore

@@ -0,0 +1,8 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+# don't lint coverage output
+coverage
+# don't lint storybook
+.storybook

packages/web-components/fast-components-msft/.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+    extends: ["@microsoft/eslint-config-fast-dna", "prettier"],
+    rules: {
+        "no-extra-boolean-cast": "off",
+        "@typescript-eslint/no-use-before-define": "off",
+        "@typescript-eslint/typedef": "off",
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+    },
+};

packages/web-components/fast-components-msft/.npmignore

@@ -0,0 +1,20 @@
+# Tests
+__test__/
+*.test.*
+
+# specifications
+*.spec.*
+
+# images
+images/
+
+# Source files
+src/
+
+# config files
+.eslintignore
+.eslintrc.js
+.prettierignore
+.storybook
+tsconfig.json
+tsconfig.build.json

packages/web-components/fast-components-msft/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/web-components/fast-components-msft/.prettierignore

@@ -0,0 +1,2 @@
+coverage/*
+dist/*

packages/web-components/fast-components-msft/.storybook/main.js

@@ -0,0 +1,24 @@
+const CircularDependencyPlugin = require("circular-dependency-plugin");
+
+module.exports = {
+    stories: ["../src/**/*.stories.ts"],
+    webpackFinal: async config => {
+        config.module.rules.push({
+            test: /\.(ts)$/,
+            use: [
+                {
+                    loader: require.resolve("ts-loader"),
+                },
+            ],
+        });
+        config.resolve.extensions.push(".ts");
+        config.plugins.push(
+            new CircularDependencyPlugin({
+                exclude: /node_modules/,
+                failOnError: process.env.NODE_ENV === "production",
+            })
+        );
+
+        return config;
+    },
+};

packages/web-components/fast-components-msft/README.md

@@ -0,0 +1,14 @@
+# FAST Components MSFT
+
+A set of React components which implements the Microsoft styling.
+
+## Installation
+
+`npm i --save @microsoft/fast-components-msft`
+
+### Known issue with Storybook site hot-reloading during development
+
+Storybook will watch modules for changes and hot-reload the module when necessary. This is usually great but poses a problem when the module being hot-reloaded defines a custom element. A custom element name can only be defined by the `CustomElementsRegistry` once, so reloading a module that defines a custom element will attempt to re-register the custom element name, throwing an error because the name has already been defined. This error will manifest with the following message:
+`Failed to execute 'define' on 'CustomElementRegistry': the name "my-custom-element-name" has already been used with this registry`
+
+This is a known issue and will indicate that you need to refresh the page. We're working on surfacing a more instructive error message for this case.

packages/web-components/fast-components-msft/package.json

@@ -0,0 +1,48 @@
+{
+    "name": "@microsoft/fast-components-msft",
+    "description": "A library of Web Components with Microsoft styles",
+    "sideEffects": false,
+    "version": "0.0.0",
+    "author": {
+      "name": "Microsoft",
+      "url": "https://discord.gg/FcSNfg4"
+    },
+    "license": "MIT",
+    "repository": {
+      "type": "git",
+      "url": "git+https://github.com/Microsoft/fast-dna.git"
+    },
+    "bugs": {
+      "url": "https://github.com/Microsoft/fast-dna/issues/new/choose"
+    },
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "scripts": {
+      "build": "tsc -p ./tsconfig.build.json",
+      "clean:dist": "node ../../../build/clean.js dist",
+      "prepare": "yarn clean:dist && yarn build",
+      "prettier": "prettier --config ../../../.prettierrc --write \"**/*.ts\"",
+      "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.ts\" --list-different",
+      "eslint": "eslint . --ext .ts",
+      "eslint:fix": "eslint . --ext .ts --fix",
+      "start": "start-storybook -p 6006",
+      "test": "yarn build-storybook && yarn eslint",
+      "build-storybook": "build-storybook"
+    },
+    "devDependencies": {
+      "@babel/core": "^7.8.4",
+      "@microsoft/eslint-config-fast-dna": "^1.1.1",
+      "@storybook/cli": "^5.3.13",
+      "@storybook/html": "^5.3.13",
+      "circular-dependency-plugin": "^5.2.0",
+      "prettier": "2.0.2",
+      "ts-loader": "^6.2.1",
+      "typescript": "^3.7.5"
+    },
+    "dependencies": {
+      "@microsoft/fast-components": "^0.10.1",
+      "@microsoft/fast-components-styles-msft": "4.28.9",
+      "@microsoft/fast-element": "^0.8.1"
+    }
+  }
+

packages/web-components/fast-components-msft/src/anchor/anchor.stories.ts

@@ -0,0 +1,13 @@
+import { FASTDesignSystemProvider } from "../design-system-provider";
+import AnchorTemplate from "./fixtures/anchor.html";
+import { FASTAnchor } from "./";
+
+// Prevent tree-shaking
+FASTAnchor;
+FASTDesignSystemProvider;
+
+export default {
+    title: "Anchor",
+};
+
+export const Anchor = () => AnchorTemplate;

packages/web-components/fast-components-msft/src/anchor/anchor.styles.ts

@@ -0,0 +1,59 @@
+import { css } from "@microsoft/fast-element";
+import {
+    AccentButtonStyles,
+    accentFillActiveBehavior,
+    accentFillHoverBehavior,
+    accentFillRestBehavior,
+    accentForegroundActiveBehavior,
+    accentForegroundCutRestBehavior,
+    accentForegroundHoverBehavior,
+    accentForegroundRestBehavior,
+    BaseButtonStyles,
+    HypertextStyles,
+    LightweightButtonStyles,
+    neutralFillActiveBehavior,
+    neutralFillFocusBehavior,
+    neutralFillHoverBehavior,
+    neutralFillRestBehavior,
+    neutralFillStealthActiveBehavior,
+    neutralFillStealthHoverBehavior,
+    neutralFillStealthRestBehavior,
+    neutralFocusBehavior,
+    neutralFocusInnerAccentBehavior,
+    neutralForegroundRestBehavior,
+    neutralOutlineActiveBehavior,
+    neutralOutlineHoverBehavior,
+    neutralOutlineRestBehavior,
+    OutlineButtonStyles,
+    StealthButtonStyles,
+} from "../styles/";
+
+export const AnchorStyles = css`
+    ${BaseButtonStyles}
+    ${AccentButtonStyles}
+    ${HypertextStyles}
+    ${LightweightButtonStyles}
+    ${OutlineButtonStyles}
+    ${StealthButtonStyles}
+`.withBehaviors(
+    accentFillActiveBehavior,
+    accentFillHoverBehavior,
+    accentFillRestBehavior,
+    accentForegroundActiveBehavior,
+    accentForegroundCutRestBehavior,
+    accentForegroundHoverBehavior,
+    accentForegroundRestBehavior,
+    neutralFillActiveBehavior,
+    neutralFillFocusBehavior,
+    neutralFillHoverBehavior,
+    neutralFillRestBehavior,
+    neutralFillStealthActiveBehavior,
+    neutralFillStealthHoverBehavior,
+    neutralFillStealthRestBehavior,
+    neutralFocusBehavior,
+    neutralFocusInnerAccentBehavior,
+    neutralForegroundRestBehavior,
+    neutralOutlineActiveBehavior,
+    neutralOutlineHoverBehavior,
+    neutralOutlineRestBehavior
+);

packages/web-components/fast-components-msft/src/anchor/fixtures/anchor.html

@@ -0,0 +1,69 @@
+<fast-design-system-provider use-defaults>
+    <h1>Anchor</h1>
+
+    <h4>Default</h4>
+    <fast-anchor href="#">Anchor</fast-anchor>
+
+    <h5>With target</h5>
+    <fast-anchor href="https://microsoft.com" target="_blank">Anchor</fast-anchor>
+
+    <h4>Neutral</h4>
+    <fast-anchor href="#" appearance="neutral">Button</fast-anchor>
+
+    <h4>Accent</h4>
+    <fast-anchor href="#" appearance="accent">Anchor</fast-anchor>
+
+    <h4>Hypertext</h4>
+    <fast-anchor href="#" appearance="hypertext">Anchor</fast-anchor>
+    <br/>
+    <fast-anchor appearance="hypertext">Anchor (no href)</fast-anchor>
+
+    <h4>Lightweight</h4>
+    <fast-anchor href="#" appearance="lightweight">Anchor</fast-anchor>
+
+    <h4>Outline</h4>
+    <fast-anchor href="#" appearance="outline">Anchor</fast-anchor>
+
+    <h4>Stealth</h4>
+    <fast-anchor href="#" appearance="stealth">Anchor</fast-anchor>
+
+    <h4>With start</h4>
+    <fast-anchor href="#">
+        Anchor
+        <svg
+            slot="start"
+            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>
+    </fast-anchor>
+
+    <h4>With end</h4>
+    <fast-anchor href="#">
+        Anchor
+        <svg
+            slot="end"
+            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>
+    </fast-anchor>
+
+    <h4>Icon in default slot</h4>
+    <fast-anchor href="#">
+        <svg
+            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>
+    </fast-anchor>
+</fast-design-system-provider>

packages/web-components/fast-components-msft/src/anchor/index.ts

@@ -0,0 +1,14 @@
+import { customElement } from "@microsoft/fast-element";
+import { Anchor, AnchorTemplate as template } from "@microsoft/fast-foundation";
+import { AnchorStyles as styles } from "./anchor.styles";
+
+// Anchor
+@customElement({
+    name: "fast-anchor",
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true,
+    },
+})
+export class FASTAnchor extends Anchor {}

packages/web-components/fast-components-msft/src/badge/badge.stories.ts

@@ -0,0 +1,13 @@
+import { FASTDesignSystemProvider } from "../design-system-provider";
+import BadgeTemplate from "./fixtures/badge.html";
+import { FASTBadge } from "./";
+
+// Prevent tree-shaking
+FASTBadge;
+FASTDesignSystemProvider;
+
+export default {
+    title: "Badge",
+};
+
+export const Badge = () => BadgeTemplate;

packages/web-components/fast-components-msft/src/badge/badge.styles.ts

@@ -0,0 +1,49 @@
+import { css } from "@microsoft/fast-element";
+import { display } from "@microsoft/fast-foundation";
+import {
+    accentFillRestBehavior,
+    accentForegroundCutRestBehavior,
+    accentForegroundRestBehavior,
+    neutralFillInputRestBehavior,
+    neutralFillToggleRestBehavior,
+    neutralForegroundRestBehavior,
+} from "../styles";
+
+export const BadgeStyles = css`
+    ${display("inline-block")} :host {
+        box-sizing: border-box;
+        font-family: var(--body-font);
+        ${/* Font size, weight, and line height are temporary - 
+            replace when adaptive typography is figured out */ ""} font-size: 12px;
+        font-weight: 400;
+        line-height: 18px;
+    }
+
+    .badge {
+        border-radius: calc(var(--corner-radius) * 1px);
+        padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px);
+    }
+
+    :host(.lightweight) {
+        --badge-fill-lightweight: transparent;
+        --badge-color-value: var(--neutral-foreground-rest);
+        font-weight: 600;
+    }
+
+    :host(.accent) {
+        --badge-fill-accent: var(--accent-fill-rest);
+        --badge-color-value: var(--accent-foreground-cut-rest);
+    }
+
+    :host(.neutral) {
+        --badge-fill-neutral: var(--neutral-fill-toggle-rest);
+        --badge-color-value: var(--neutral-fill-input-rest);
+    }
+`.withBehaviors(
+    accentFillRestBehavior,
+    accentForegroundCutRestBehavior,
+    accentForegroundRestBehavior,
+    neutralForegroundRestBehavior,
+    neutralFillInputRestBehavior,
+    neutralFillToggleRestBehavior
+);

packages/web-components/fast-components-msft/src/badge/fixtures/badge.html

@@ -0,0 +1,19 @@
+<fast-design-system-provider use-defaults>
+    <h1>Badge</h1>
+    <h4>Default</h4>
+    <fast-badge>
+        Badge
+    </fast-badge>
+    <h4>Lightweight</h4>
+    <fast-badge fill="lightweight">
+        Badge
+    </fast-badge>
+    <h4>Accent</h4>
+    <fast-badge fill="accent">
+        Badge
+    </fast-badge>
+    <h4>Neutral</h4>
+    <fast-badge fill="neutral">
+        Badge
+    </fast-badge>
+</fast-design-system-provider>